PERANCANGAN WEBSITE UNTUK PENJUALAN ALAT PRAMUKA PADA TOKO SAS

Ahmad Syaogi 108091000120 Program Studi Teknik Informatika, Fakultas Sains dan Teknologi, Universitas Islam Negeri Syarif Hidayatullah Jakarta, Indonesia ogienich@gmail.com Abstrak Ahmad Syaogi, perancangan website untuk penjualan alat pramuka pada toko sas. Dibawah Bimbingan Viva Arifin, MMSI Pada era ekonomi digital saat ini, persaingan usaha sangat ketat. Dibutuhkan perangkat teknologi informasi untuk memperkuat bisnis, salah satunya adalah memanfaatkan media internet. Melalui media internet, sejatinya akan dapat memperluas cakupan calon pelanggan potensial. Perkembangan teknologi telekomunikasi dan komputer menyebabkan terjadinya perubahan kultur kita sehari-hari. Dalam era yang disebut information age ini, media internet menjadi salah satu media andalan untuk melakukan komunikasi dan bisnis. Media internet yang semakin luas jaringannya sangat mudah digunakan oleh siapa saja dan dimana saja. Ini dibuktikan dengan semakin banyaknya pengembang web yang bermunculan. Sehingga menyebabkan para pelaku bisnis mau tidak mau harus menggunakan media internet ini untuk pengembangan bisnisnya. Dengan kemajuan teknologi, menjadikan setiap pelaku bisnis untuk beralih menjual produk mereka secara online. Agar dapat menjaga perkembangan serta kemajuan usahanya. Sehingga dapat memberikan kemudahan bagi konsumen dalam memilih barang dengan berbagai macam alternatif yang ada, tanpa harus mengunjungi tempat usaha tersebut. Dalam hal ini dibutuhkan suatu website yang dapat digunakan sebagai media promosi. Dan sebelum website diluncurkan secara online ke jaringan internet, dibutuhkan suatu rancangan website yang interaktif. Kata kunci: Internet, Media promosi, Website dia andalan untuk melakukan komunikasi dan bisnis. Media internet yang semakin luas jaringannya sangat mudah digunakan oleh siapa saja dan dimana saja. Ini dibuktikan dengan semakin banyaknya pengembang web yang bermunculan. Sehingga menyebabkan para pelaku bisnis mau tidak mau harus menggunakan media internet ini untuk pengembangan bisnisnya. Toko SAS merupakan toko yang menjual segala jenis perlengkapan pramuka. Dengan kemajuan teknologi, menjadikan setiap pelaku bisnis untuk beralih menjual produk mereka secara

1.

Pendahuluan 1.1 Latar Belakang Pada era ekonomi digital saat ini, persaingan usaha sangat ketat. Dibutuhkan perangkat teknologi informasi untuk memperkuat bisnis, salah satunya adalah memanfaatkan media internet. Melalui media internet, sejatinya akan dapat memperluas cakupan calon pelanggan potensial. Perkembangan teknologi telekomunikasi dan komputer menyebabkan terjadinya perubahan kultur kita sehari-hari. Dalam era yang disebut information age ini, media internet menjadi salah satu me-

online. Agar dapat menjaga perkembangan serta kemajuan toko. Sehingga dapat memberikan kemudahan bagi konsumen dalam memilih barang dengan berbagai macam alternatif yang ada, tanpa harus mengunjungi toko tersebut. Berdasarkan uraian tersebut Toko SAS membutuhkan suatu sistem untuk dapat memperluas jangkauan promosinya melalui jaringan internet. Dalam hal ini dibutuhkan suatu website yang dapat digunakan sebagai media promosi. Dan sebelum website diluncurkan secara online ke jaringan internet, dibutuhkan suatu rancangan website yang interaktif. Menyikapi hal tersebut, penulis mencoba merancang sebuah website Untuk Penjualan Alat Pramuka Pada Toko SAS. 1.2 Perumusan Masalah Dari uraian latar belakang di atas, dapat dipahami mengapa toko SAS sangat membutuhkan suatu rancangan website. Untuk itu, dalam implementtasinya ada beberapa hal yang harus dilakukan, yaitu : 1. Bagaimana membuat suatu rancangan website interaktif ? 2. Komponen-komponen apa saja yang harus dimasukkan ke dalam rancangan website tersbut ? 1.3 Batasan Masalah Agar permasalahan yang dibahas lebih terfokus dan tidak melebar, penulis pun membatasi permasalahan yang akan dibahas. Hal-hal yang akan dibahas dan dijabarkan adalah : 1. Tools-tools yang digunakan dalam perancangan website. 2. Tahapan-tahapan perancangan website. 1.4 Tujuan Penulisan Berdasarkan uraian latar belakang masalah, maka tujuan penulisan laporan PKL ini antara lain adalah : 1. Merancang suatu perangkat lu-nak sebagai media promosi yang menarik. 2. Membantu Toko SAS mengatasi masalah tentang mempromosikan barang kepada masyarakat umum yang merupakan para calon

pelanggan potensial melalui media internet. 1.5 Manfaat Penulisan Manfaat yang didapat dalam melakukan PKL adalah : 1. Bagi Penulis a. Dapat mempelajari lebih jauh mengenai perancangan suatu website. b. Mengetahui secara langsung penggunaan teknologi atau peranan teknologi informasi dan komunikasi di tempat penelitian. c. Melatih kerja dan mengamati teknik-teknik yang diterapkan di lapangan dalam bidang Teknik Informatika. d. Memenuhi salah satu syarat kelulusan strata satu (S1), Teknik Informatika Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta. e. Memperkenalkan gambaran umum perusahaan yang diperlukan mahasiswa dalam memasuki dunia kerja yang sesuai dengan bidangnya dan sebagai pengalaman kerja. 2. Bagi Perusahaan terkait a. Memiliki sebuah desain web yang bisa dijadikan suatu media promosi di jaringan internet. b. Dengan adanya desain web ini diharapkan bisa mem-perluas jangkauan promosi perusahaan. c. Menjadikan perusahaan lebih maju sesuai dengan perkembangan teknologi. 3. Bagi Universitas a. Sebagai bahan informasi, bahan pembanding, dan sebagai kerangka acuan dalam memahami persoalan yang sama. b. Sebagai sarana untuk mengukur sejauh mana pemahaman dan penguasaan mahasiswa tentang teori yang telah diberikan. c. Hasil penelitian ini juga dapat dipakai sebagai bahan evaluasi akademik.

1.6 Nama Kegiatan Kegiatan yang dilakasanakan adalah Praktek Kerja Lapanga (PKL) dengan judul Perancangan Website Untuk Penjualan Alat Pramuka Pada TOKO SAS. 1.7 Waktu dan Tempat Pelaksanaan Adapun waktu pelaksanaan Praktek Kerja Lapangan (PKL) yang dilaksanakan penulis, yaitu pada tanggal 20 Agustus 2011 sampai dengan 30 September 2011. Di Toko SAS yang beralamat di Gedung Pasar Jatinegara Lantai 2A, Blok S No 109 Telp. 021 85910403.

2.

Landasan Teori 2.1 Web Browser Web browser adalah software yang digunakan untuk menampilkan informasi dari web server. Software ini kini telah dikembangkan dengan menggunakan user interface grafis, sehingga pemakai dapat melakukan point dan click untuk pindah antar dokumen. Haryanto juga mendifinisikan bahwa web browser adalah software atau perangkat lunak untuk menampilkan dokumen web (HTML). Selain itu web browser dapat dilengkapi beragam plugin yang dapat menampilkan berbagai jenis dokumen lain misalnya PDF, postscript, Macromedia Flash untuk file animasi dan sebagainya, seperti AltaVista dan All the web (Hariyanto, 2004). Prinsip kerja pengaksesan sebuah halaman web yang berbasi HTML adalah sebagai berikut : 1. Browser meminta sebuah halaman ke suatu situs web melalui protocol http. 2. Web server me-request permintaan. 3. Web server segera mengirimkan dokumen HTML yang diminta ke client. 4. Browser pada client akan membaca dan mengartikan dokumen yang diterima. 5. Berdasarkan kode-kode pemformatan yang terdapat pada dokumen HTML,

lalu menampilkan dalam versinya masing-masing. 2.2 Web Server Web server adalah computer yang digunakan untuk menyimpan dokumendokumen web, computer ini akan melayani permintaan dokumen web dari client nya. Web browser berkomunikasi dengan web server lewat jaringan komunikasi menggunakan protocol HTTP. Browser mengirim pesan meminta dokumen atau layanan tertentu pada web server. Kemudian web server menanggapi dengan mengirim dokumen atau menjalankan layanan tertentu di server dan mengirim hasil menggunakan protocol HTTP. Setelah itu browser akan menerima dokumen (HTML) hasil tanggapan dari web server dan menampilkannya di layar (Haryanto, 2004). Protocol HTML dirancang untuk dapat menggabung semua protocol internet seperti Goper, Telnet, WAIS, dan sebagainya dalam satu protocol tunggal. Semua layanan protocol lain dikemas sebagai layanan-layanan yang disediakan lewat interaksi web browser dan web server. Web server yang terkenal diantaranya adalah Apache dan Microsoft Internet Information Service (IIS). Apache merupakan web server dapat beroperasi di semua platform, sedangkan IIS hanya dapat beroperasi di system Operasi Windows. 2.3 Apache Web Server Apache merupakan turunan dari web server yang dikeluarkan oleh NSCA. Apache web server merupakan tulang punggung dari World Wide Web (WWW). Web server menunggu permintaan dari client yang menggunakan aplikasi web browser. Web server dalam berkomunikasi dengan kliennya menggunakan protocol HTTP. Apache berada di bawah GNU (General Public License) bersifat free dan bisa didownload secara gratis di http://www.apache.org. Inilah alasan penulis menggunakan apache web server pada penelitian sekarang.

2.4 Aplikasi Web Browser Mozila Firefox, Internet Explorer, Opera, Flock Merupakan beberapa software yang digunakan untuk menampilkan informasi dari web server. Masing-masing aplikasi mempunyai kemampuan berbeda-beda dalam hal menjelajahi dunia internet baik dari segi keamanan maupun kenyamanan. Penulis disini menggunakan aplikasi web browser dari Mozilla Firefox, akan tetapi menggunakan aplikasi web browser yang lain juga bisa. (Permana,2004:50). 2.5 WWW (World Wide Web) World Wide Web juga disebut web, www, dan w3 adalah ruang informasi di internet tempat dokumen-dokumen hypermedia disimpan dan dapat diambil melalui suatu skema alamat yang unik. Web menyediakan metode untuk penyimpanan dan mengambil dokumendokumennya (McLeod,2001). WWW merupakan aplikasi internet yang paling diminati para pemakai. WWW tidak lagi disertai utilitas baris dan instruksi yang merupakan cara paling umum dalam menjelajah internet, tapi dirancang dari ribuan halaman dan dokumen yang saling berhubungan serta dapat ditampilkan di layar monitor. Melalui WWW, perusahaan dapat memasang halaman web yang interaktif untuk memberikan informasi atau menarik minat para calon konsumennya (Oetomo, 2003). Salah satu istilah yang berkaitan dengan WWW adalah website atau situs web. Website atau situs web adalah sekumpulan dokumen yang dipublikasikan melalui jaringan internet ataupun intranet sehingga dapat diakses oleh pemakai melalui web browser (Sardi, 2004). Dokumen tersebut dapat terdiri dari satu atau lebih kombinasi beberapa jenis file seperti teks, gambar, suara, atau video. 2.6 Kelebihan dan Kekurangan Beriklan Melalui Internet Beriklan pada internet memiliki kelebihan sekaligus kelemahan, diantaranya yaitu :

Kelebihan 1. Pemangkasan biaya perantara pasar, karena calon pembeli dapat langsung berhubungan dengan pihak produsen dalam pemesanan barang. 2. Peningkatan efektivitas iklan, karena hanya calon pembeli yang benar-benar berminat yang akan membolak-balikan halaman iklan di internet. 3. Jangkauan yang relatif luas, bahkan sampai mancanegara. 4. Informasi tambahan dan perbaikan informasi dapat dilakukan dengan segera. b. Kelemahan 1. Konsumen ragu untuk memesan melalui internet karena factor keamanan dalam bertransaksi. 2. Untuk beberapa jenis produk, konsumen merasakan kekhawatiran apakah barang yang dilihat di layar monitor sesuai dengan yang diinginkan konsumen, karena tidak memiliki kesempatan untuk memerhatikan dengan seksama jenis dan kualitas barang yang akan dibeli. 3. Tidak semua orang memiliki akses internet dan tidak semua orang juga memiliki waktu untuk membolak-balik halaman internet. 2.7 Dokumen HTML HTML kependekan dari Hyper Text Markup Languange. Dokumen HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarang. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan dalam browser web surfer. Dokumen ini umumnya berisi informasi atau interface aplikasi dalam internet. Ada dua cara untuk membuat sebuah web page : dengan HTML editor atau dengan editor teks biasa (misalnya : notepad). Dokumen HTML disusun oleh elemenelemen. Elemen merupakan istilah bagi

a.

komponen-komponen dasar pembentuk dokumen HTML. 2.8 Teknik Desain Website Berdasarkan dari sifat desain elemenelemen website ada 3 (tiga) teknik dasar dalam mendesain website, yaitu : 1. Teknik Desain Es Dari namanya "es" berarti adalah suatu zat beku yang solid dan telah dibentuk sesuai dengan keinginan pembuatnya. Dalam dunia web, ini berarti desain tampilan homepage atau website sifatnya adalah fixed sized. Artinya adalah ukuran elemen-elemen webnya telah ditetapkan oleh web desainernya. 2. Teknik Desain Air Ibaratnya suatu zat cair akan berubah bentuk sesuai dengan wadahnya. Dalam teknik ini berarti desain website akan bersifat fleksibel sekali. Contoh teknik ini adalah ditandai dengan penggunaan angka persentase pada sebagian elemen tag website. 3. Teknik Desain Jelly Teknik ini adalah gabungan dari kedua teknik diatas, air dan es. Jelly adalah sebuah substansi yang tidak bisa dibilang cair atau dibilang padat. Jika pernah menemui produk makanan jelly ini dipasaran maka akan terllihat bahwa jelly ini kelihatan unik sekali baik bentuk ataupun rasa. 3. Pembahasan 3.1 Tahap Perencanaan Pada tahap ini penulis melakukan perencanaan pembuatan aplikasi yang belum ada dengan mengetahui data apa saja yang terdapat pada Toko Perlengkapan Alat Pramuka SAS untuk dapat dipromosikan kepada masyarakat luas. Penulis juga mengumpulkan datadata yang ada pada Toko SAS untuk ditampilkan aplikasi yang akan dibuat. Karena belum adanya sarana untuk mempromosikan informasi tersebut maka masyarakat luas kurang mengetahui

secara tepat dan jelas mengenai produkproduk yang ada pada Toko SAS. Data-data yang dibutuhkan untuk pembuatan website penjualan Toko SAS telah dikumpulkan agar memudahkan dalam pembuatan website. Data yang dikumpulkan adalah semua produk yang dijual pada Toko SAS dan semua informasi yang menjelaskan tentang Toko SAS. 3.2 Tahap Analisis Penulis menganalisa dan mengamati permasalahan yaitu belum adanya website yang dibuat untuk memperluas jangkauan berpromosi kepada masyarakat melalui media internet. Analisis yang penulis usulkan yaitu pembuatan website penjualan pada Toko Perlengkapan Alat Pramuka SAS. 3.2.1 Analisa Perancangan Flowchart

Gambar 3.1 Flow Chart 3.3 Tahap Rancangan Sistem Aplikasi yang dirancang ini adalah Aplikasi Web profile yang dibuat dengan menngunakan HTML dan PHP. Maksud dan tujuan dari perancangan Design Aplikasi Web profile ini adalah mengenalkan atau mempromosikan produk yang ada di toko perlengkapan pramuka SAS ke dunia yang lebih luas

serta dapat mengembangkan jaringan pasar ke mancanegara melalui internet. Pada tahap ini penulis melakukan perancangan aplikasi berupa perancangan storyboard. 3.3.1 Perancangan Storyboard Penulis mendeskripsikan tiap menu (tampilan), dengan mencantumkan semua objek multimedia dan link ke menu lain. Secara umum rancangan yang dihasilkan penulis terdiri dari empat menu : a. Menu Home b. Menu Produk c. Menu About Us d. Menu Contact Us 3.3.2 Perancangan Struktur Navigasi Perancangan Struktur Navigasi pembuatan website menggunakan hierarki menu.

2.

Gambar 3.3 Perancangan Halaman Home Tampilan menu Produk

3.

Gambar 3.4 Perancangan Halaman Produk Tampilan menu About Us

4.
Gambar 3.2 Struktur Navigasi

Gambar 3.5 Perancangan Halaman About Us Tampilan menu Contact Us

3.3.3

Perancangan Antarmuka (Inter face) Perancangan user interface merupakan rancangan tampilan pembuatan website toko perlengkapan pramuka SAS. Interface yang ditampilkan pada website ini akan disesuaikan dengan kebutuhan pengguna yang akan melihat informasi yang mereka butuhkan mengenai perusahaan. Pada program terdapat beberapa rancangan menu, yaitu : 1. Tampilan menu halaman utama (Home)

Gambar 3.6 Perancangan Halaman Contact Us 3.4 Tahap Penerapan Sistem 3.4.1 Perangkat Penerapan Aplikasi Spesifikasi perangkat lunak dan perangkat keras yang penulis butuhkan dalam perancangan website. a. Perangkat Lunak 1. XAMPP 1.6.6 sebagai Localhost Server XAMPP merupakan tool yang menyediakan paket perangkat lunak ke dalam satu buah paket. Dengan menginstall XAMPP maka tidak perlu lagi melakukan

instalasi dan konfigurasi web server Apache, PHP dan MySQL secara manual. XAMPP akan menginstalasi dan mengkonfigurasikannya secara otomatis untuk anda atau auto konfigurasi. 2. Macromedia Dreamweaver 8 Macromedia Dreamweaver adalah sebuah HTML editor profesional untuk mendesain secara visual dan mengelola situs web maupun halaman web. Bilamana kita menyukai untuk berurusan dengan kode-kode HTML secara manual atau lebih menyukai bekerja dengan lingkungan secara visual dalam melakukan editing, Dreamweaver mambuatnya menjadi lebih mudah dengan menyediakan tooltool yang sangat berguna dalam peningkatan kemampuan dan pengalaman kita dalam mendesain web. 3. Adobe Photoshop Photoshop adalah software yang digunakan untuk memodifikasi gambar atau foto secara profesional baik meliputi modifikasi obyek yang sederhana maupun yang sulit sekalipun. Photoshop merupakan salah satu software yang berguna untuk mengolah gambar berbasis bitmap, yang mempunyai tool dan efek yang lengkap sehingga dapat menghasilkan gambar atau foto yang berkwalitas tinggi. Kelengkapan fitur yang ada di dalam Photoshop inilah yang

b.

akhirnya membuat software ini banyak digunakan oleh desainer grafis profesional. Dan mungkin juga sampai saat ini masih belum ada software desain grafis lain yang bisa menyamai kelengkapan fitur dalam Photoshop. 4. Macromedia Flash 8 Macromedia Flash merupakan sebuah program yang didesain khusus oleh Macromedia, saat itu sebagai pengembangnya yang saat ini sudah dibeli oleh Adobe Incorporated sehingga berubah nama menjadi Adobe Flash, Flash didesain dengan kemapuan untuk membuat animasi 2 dimensi yang handal dan ringan sehingga flash banyak digunakan untuk membangun dan memberikan efek animasi pada website, CD Interaktif dan yang lainnya. Perangkat Keras Processor Intel berfungsi untuk proses kinerja sistem computer di dalam pembuatan program. Memory 1 GB berfungsi untuk mempercepat proses rendering gambar beserta efeknya, dan secara umum, penyediaan memori yang berukuran besar sebagai tempat penyimpanan sementara dapat mempercepat penggunaan perangkat lunak. Harddisk 80 GB berfungsi untuk menyediakan tempat bagi aplikasi perangkat lunak dan menyediakan tempat penyimpanan untuk keperluan program. USB Flash Disk berfungsi sebagai tempat penyimpanan

3.4.2

kedua sebagai backup untuk keperluan program. Keyboard berfungsi untuk penulisan listing program dan secara umum sebagai alat interaksi yang penting pada pembuatan program ini. Monitor berfungsi sebagai interface (antar muka) atau penghubung antara penulis dan computer. Mouse berfungsi sebagai alat interaksi penggunaan perangkat lunak pengembangan dan secara umum sebagai alat interaksi yang penting pada pembuatan program ini. Penerapan Antar Muka (Inter face) 1. Tampilan menu halaman utama (Home) Tampilan ini berfungsi sebagai tampilan utama yang menyediakan beberapa menu yaitu : Home, Produk, About Us dan Contact Us.

3.

Gambar 3.8 Tampilan menu Produk Tampilan menu halaman About Us Tampilan ini akan ditampilkan About Us berisi tentang profil sekilas toko.

Gambar 3.7 Tampilan Home

2.

Tampilan menu halaman Produk Tampilan ini akan ditampilkan produk toko yang berisi foto-foto produk yang ada d toko.

4.

Gambar 3.9 Tampilan menu About Us Tampilan menu halaman Contact Us Tampilan ini akan ditampilkan Contact Us yang berisi alamat dan kontakkontak yang bisa dihubungi

DAFTAR PUSTAKA Ramadhan, Arief. Student Guide Series Macromedia Dreamweaver 8 . Jakarta : PT. Elex Media Komputindo. 2007. Pohan, Husni Iskandar. Pemrograman WEB dengan HTML. Bandung : Informatika 2007. Permana, Budi. Kiat Praktis Menjadi Desainer Web. Jakarta : PT. Elex Media Komputindo. 2004. Juju, Dominikus. Teknik Mempercepat Koneksi Internet. Jakarta : PT. Elex Media Komputindo. 2008. Jasmadi. Mengolah Image dari Peralatan Digital Menggunakan Adobe CS2 Jakarta : PT. Elex Media Komputindo. 2005. Enterprise, Jubilee. Cara Cepat Belajar Flash 8 . Jakarta : PT. Elex Media Komputindo. 2008. Jide. Unsur-unsur dalam Penyediaan Website .Jakarta : Media Kita. 2009. Supriyanto, Aji. Arsitektur dan Teknik Desain Informasi pada Web. 2007 [online] Tersedia : www.unisbank.ac.id/ojs/index.php/fti1/article/ download/44/39 [20 Oktober 201, 10:42 AM] Winarno, Edy. Mudah Membuat Website. Jakarta : PT Elex Media Komputindo. 2009. Rahardja, Untung. Siapa Saja Bisa Membuat Website Dengan Css dan HTML. Yogyakarta : Andi. 2007 Sidik, Betha. Pemrograman Web dengan HTML. Bandung : Informatika. 2007

Gambar 3.10 Tampilan menu Contact Us 4. Kesimpulan dan Saran 4.1 Kesimpulan Perancangan Website penjualan ini dibuat agar dapat membantu memperluas jangkauan promosi. Karena promosi dilakukan melalui media internet yang bisa menjangkau seluruh pelosok mancanegara. Sehingga bisa memperluas target pasar pula. Xampp adalah sebuah aplikasi yang dapat menjadikan komputer kita menjadi sebuah server. 4.2 Saran Berdasarkan kesimpulan di atas ada beberapa hal yang harus di perhatikan agar dapat berjalan dengan baik : 1. Agar lebih interaktif,website ini dapat dikembangkan menjadi website dinamis sehingga dapat menjadi toko online. 2. Dari segi keamanan website ini masih kurang karena masih bersifat statis. Dan untuk pengembangan menjadi toko online sebaiknya ditambahkan login user agar lebih secure dalam melakukan transaksi.