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 NAMA
: Mugi Prasetyo
: 30401214
NPM JURUSAN
: D3 – Manajemen Informatika
DOSEN PEMBIMBING
: Diyah Ruri Irawati,Skom,MMSI
DiTulis guna melengkapi sebagian syarat untuk mencapai jenjang Diploma Tiga ( D3 ) SEKOLAH TINGGI MANAJEMEN INFORMATIKA & KOMPUTER JAKARTA STI&K 2005
1
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-perusahaan dalam negeri dan perusahaanperusahaan 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 kekurangankekurangan dari permasalahan yang dihadapinya.
2
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 tagtag 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 :
3
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.
4
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 saransaran yang berisi pandangan dan usulan tentang halhal yang dapat dilakukan.
5
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. Fasilitas-fasilitas pada internet yang sering digunakan seperti:
6
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 Upload. 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
7
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 email. World wide web sendiri terdiri dari banyaknya file dokumendokumen informasi pada komputer server (server web). Komputerkomputer 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
8
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 benarbenar ada pada halaman web (situs web). Sebarang grafis, suara atau image animasi yang dilihat pada halaman web (situs web) adalah file-
9
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 rangkairangkai 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.
10
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).
11
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.
12
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.
13
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, alatalat pendakian dan asesoris-asesoris. 14
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 :
15
Peta Navigasi HOME
Profile
Produk
Image toko
Kontak kami
Image produk
Download
Download
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 16
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 Image
image
Teks
Flash but ton
Flash button
Flash button
Image Rollover
Flash button
Tabel 3-4-a Halaman Utama b.
Tabel halaman profile
Layout table
17
Flash button
image
Teks
Flash but ton
image
Flash but ton
Flash but ton
Flash but ton
teks
Image Rollover
Flash but ton
Tabel 3-4-b Halaman Profile c.
Tabel halaman produk
Layout table Image
image
teks
Flash but ton
Flash but ton
Flash but ton
Image Rollover Teks
Image Rollover
Teks
Image Rollover teks
teks
Image Rollover
teks Image Rollover
Image Teks
Flash but ton
teks Image Rollover
teks
Teks
Image Rollover teks
teks
Flash but ton
Tabel 3-4-c Halaman Produk d.
Tabel halaman kontak kami
Layout table image
18
Flash buton
Flash buton
Flash buton
Flash buton
teks
Flash buton
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.
19
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:
20
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 size(+5)color#330000/hitamadventurerwor kshopsize(3)color#FFFF66 Bold>Aligncenter. Teks Bolder
Teks adventurerworkshop
Gambar C-2
memasukkan image
5. link button Produk
>starpinner>size(12)sepertihome,Profile, dan
kontak
kami.Menggunakan>Insert>media
width(129) height(27)> filelink 21
quality scale <defaultshowall> Align <default> kecuali Download> slider >size >1 4 Link Button Produk
Gambar C-4 Rangkuman Produk 7. Link Profile hanya menanpilkan sejarah toko ini berdiri dengan memakai insert teks size (-3) format <paragraf>
front
image>width(170)height(127) >Front
22
<justify>
sedangkan
Scr:age/16-05-05_1232.png
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>teksfacesi ze(2)FrontBulletandnumbering. image produk
Teks
Gambar C-6
Link Produk
9. Link kontak kami memberitahu alamat toko ini menggunakan insert>teksfacesize(2)Fr ontSize(6)>color#00FF00Frontformat<paragraf>.
Alamat
23
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 datadata yang akan ditampilkan pada browser. HTML lebih menekankan pada penggambaran komponenkomponen, struktur dan formatting didalam halaman web daripada menentukan penampilannya HTML tidak didesain untuk desktop publishing,tetapi didesain sebagai bahasa pengkodean untuk WWW.
24
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> tag awal
tag akhir
25
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 : < HTML > < HEAD > ………………..blok judul…………. < /HEAD > < BODY > ………………blok Body………….. < /BODY > < /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.
26
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 :
27
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 fasilitasfasilitas 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.
28
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
29
juga
kerjasamanya
untuk
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.
30
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.
31
LAMPIRAN LISTING PROGRAM
32
A. Halaman Utama Untitled Document <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript" type="text/JavaScript">
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
bila anda menginginkan di klik
37
Halaman Produk <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<em> "bolder " <strong>ADVENTURER WORK SHOP
<em>Multiproduct
Carriel: boogie kapasitas:
39
100 kg shoes trekking
Carriel : salewakapasitas :60 kg platipus : 2 liter
day pack : consinakapasitas : 40 kgrain coat: colombia
