Waktu & Tempat:

Dinas Koperasi & UMKM Prov. Jatim,

Jl. Raya Juanda, Surabaya

Kamis, 10 April 2014

Irmasari Hafidz Jurusan Sistem Informasi

Fakultas Teknologi Informasi

Institut Teknologi Sepuluh Nopember (ITS)

Jl. Raya ITS, Kampus ITS |Ruang TC205, Surabaya

Arief Bahari ariefbahari.com

Pelatihan Media Online & Website – Dinas

Koperasi & UMKM, Provinsi Jawa Timur

2 | P a g e

Daftar Isi

Daftar Isi ................................................................................................................................................................ 2

Pendahuluan .......................................................................................................................................................... 3

1 Media Online ........................................................................................................................................................ 3

STUDI KASUS 1: AMBLE | Amble Footwear .................................................................................................. 5

2 Blog Wordpress ................................................................................................................................................ 8

2.1 Jenis Akun Wordpress (WP) .................................................................................................................... 8

2.2 Syarat Penggunaan Wordpress ............................................................................................................ 8

3 Langkah-langkah Blog Wordpress? ............................................................................................................. 9

3.1 Instalasi ....................................................................................................................................................... 10

3.2 Dashboard ................................................................................................................................................. 14

3.3 Comments .................................................................................................................................................. 16

3.4 Pages........................................................................................................................................................... 16

3.5 Posts ........................................................................................................................................................... 18

3.6 Widget ........................................................................................................................................................ 20

Referensi .............................................................................................................................................................. 22

Tentang Penulis .................................................................................................................................................. 22

3 | P a g e

Pendahuluan

Tutorial Pelatihan membuat website ini terbagi menjadi 2 bagian:

bagian (1) teori tentang Media Online yang banyak digunakan untuk

promosi dan marketing sebuah produk dan

bagian (2) yaitu Tutorial Website Sederhana.

Pada bagian (1) akan dibahas beberapa definisi dasar tentang apa itu website

atau situs, serta beberapa macam contoh studi kasus tentang website.

Selanjutnya bagian (2) praktek akan dibahas mengenai pembuatan website

sederhana dengan menggunakan situs CMS yaitu Wordpress.

1 Media Online

Akun Twitter? Facebook? Instagram? Website? Yang mana yang harus saya

miliki?

Perkembangan teknologi dan media online yang begitu cepat di era digital

menuntut adanya inovasi dari para pembuat produk dan servis/ jasa. Mereka

dituntut untuk berlomba-lomba menarik sebanyak mungkin konsumen dan

serta meningkatkan penjualan produk.

Dari segi teknologi, perkembangan terbaru smartphones dan tablet

memungkinkan para produsen dan perusahaan untuk mengunggah produk dan

jasa di dunia internet secara cepat, mudah dan dengan biaya yang sangat

minimal. Untuk menjawab pertanyaan diatas, selain website yang bisa

digunakan sebagai sarana pemasaran, akun media sosial seperti Twitter,

Facebook dan Instagram, Youtube serta Pinterest sebenarnya sangat cukup

membantu memasarkan produk dan jasa serta membantu memperluas untuk

meraih jangkauan konsumen yang lebih besar.

Website merupakan alat utama sebuah perusahaan/ organisasi untuk dapat

berkomunikasi, sebagai situs utama perusahaan yang akan dijadikan rujukan

oleh para customer untuk menggali banyak informasi tentang produk dan jasa

yang ditawarkan. Kesimpulan yang bisa diambil, selain website – berbagai

akun media sosial yang telah disebutkan tadi merupakan alat yang saat ini

tidak bisa lepas dari peran marketing dari sebuah organisasi atau perusahaan.

4 | P a g e

Menurut Kiang et. al (2000), terdapat tiga fungsi utama dari internet

marketing, antara lain:

As a communication channel

Berfungsi sebagai alat pertukaran informasi antara penjual dan pembeli. Tiga fungsi khususnya yaitu:

1. Sebagai alat untuk mengakses, menyusun

dan menyampaikan informasi; 2. Untuk meningkatakn interaksi dan

pengalaman pribadi yang dialami oleh

pengguna (citra pengguna); 3. Untuk mengumpulkan informasi/feedback

pembeli (customer), via survey dan polling untuk pengenalan dan pengembangan produk baru, membangun hubungan dan

personalisasi dengan pelanggan

As a transaction channel: sales activites

Berfungsi sebagai alat yang mempermudah kegiatan penjualan. Empat fungsi khususnya yaitu:

1. Untuk meningkatkan visibilitas dimana

pelanggan berada dan meningkatkan cakupan

pelanggan; 2. Untuk meningkatkan pendapatan melalui

program cross-selling (penawaran produk lain);

3. Untuk merekam transakasi bisnis, dengan

mengurangi kompleksitas kegiatan bisnis, mengurangi penggunaan kertas dan biaya

transaksi lain; 4. Untuk mengkostumisasi promosi dan

penjualan terhadap pelanggan/ konsumen

secara individual.

As a distribution channel: Physical exchange of

products/services

Berfungsi sebagai alat bantu pertukaran fisik produk & jasa. Dua fungsi utamanya yaitu:

1. Untuk mengurangi biaya inventori, biaya

gudang, biaya peralatan dan sewa gedung;

2. Untuk mengurangi mata rantai pasok sehingga dapat mengurangi biaya

operasional.

5 | P a g e

STUDI KASUS 1: AMBLE | Amble Footwear

STUDI KASUS

AMBLE FOOTWEAR Website : http://www.amblefootwear.com/ Twitter : https://twitter.com/amblefootwear Facebook : https://www.facebook.com/amblefootwear Instagram : https://www.instagram.com/amble

6 | P a g e

Halaman depan www.amblefootwear.com

A B

7 | P a g e

AMBLE FOOTWEAR

Amble Footwear adalah toko online yang menjual produknya hanya melalui pemesanan online dari web mereka. Akun media sosial seperti akun Facebook, Twitter, dan Instagram adalah media yang membantu mereka dalam memasarkan produk, secara cepat dan biaya yang minimal.

8 | P a g e

2 Blog Wordpress

2.1 Jenis Akun Wordpress (WP) Dalam penggunaan website yang dapat dikustomisasi yaitu Wordpress, terdapat dua

jenis akun yaitu situs gratis dan berbayar, perbedaan mendasar dari dua jenis akun

tersebut adalah:

1. Akun Gratis: Akun ini akan memiliki tambahan tulisan Wordpress pada link kita,

contoh: http://gudangsepatu88.wordpress.com.

(+) Tidak memerlukan biaya apapun untuk memiliki akun tipe ini, cukup

memiliki alamat email aktif saja.

(-) Kapasitas data pada website pada tipe ini terbatas, hanya 3 GB (atau 3000

MB).

2. Akun Berbayar: Akun ini memiliki nama link yang akan disesuaikan sesuai

dengan kemauan kita dan tidak memiliki tambahan tulisan Wordpress pada

link, contoh: http://gudangsepatu88.com.

(+) Kapasitas data untuk website kita bisa disesuaikan dengan kebutuhan.

(-) Terdapat biaya tahunan yang harus dibayar oleh pemilik akun.

2.2 Syarat Penggunaan Wordpress Terdapat dua syarat yang harus dimiliki sebelum bisa memiliki domain pada situs

Wordpress.com yaitu memiliki akun email dan koneksi internet:

1. Akun Email

Pengguna situs Wordpress tidak berbayar (maupun berbayar) harus memiliki

akun email aktif (Yahoo, Gmail, Live, dll) yang digunakan sebagai ID untuk

masuk ke situs Wordpress serta melakukan update terbaru. Jika belum

memiliki email, silahkan mendaftar terlebih dahulu.

2. Koneksi Internet

Dibutuhkan koneksi internet yang cukup untuk dapat melakukan update dan

mengkases situs Wordpress. Anda dapat menggunakan modem portable

dengan koneksi layanan internet dari berbagai provider telekomunikasi, baik

CDMA (SmatFren, Telkom Flexi, dll) atau GSM (Telkomsel, Indosat, XL, dll).

JENIS AKUN WP:1. Gratis2. Berbayar

SYARAT WP:1. Email2. Koneksi Internet

9 | P a g e

3 Langkah-langkah Blog Wordpress? Terdapat beberapa langkah-langkah dasar untuk membuat blog dengan

menggunakan Wordpress, 6 langkah tersebut adalah:

1. Instalasi

2. Pengenalan Dashboard Wordpress

3. Moderasi Comments

4. Membuat Pages

5. Membuat Posts

6. Tentang Widget

1:Instalasi

2: Dashboard

3:Comments

4: Pages

5: Post

6: Widget

10 | P a g e

3.1 Instalasi Terdapat 3 langkah penting yang berhubungan dengan instalasi blog Wordpress yaitu

melakukan pendaftaran blog baru (sign up) di http://wordpress.com dengan nama

yang anda inginkan, contoh: http://gudangsepatu88.wordpress.com.

3 langkah utama tersebut adalah: mendaftarkan domain, mengisi profil, serta

memilih tema wordpress yang akan dipakai. Syarat untuk dapat melakukan

pendaftaran yaitu minimal user harus memiliki akun email aktif (Yahoo, Gmail,

Hotmail, dll).

Langkah-langkah Link & Keterangan

1. DAFTAR DOMAIN:

Mendaftarkan Domain Blog

Wordpress

https://signup.wordpress.com/signup/ https://id.wordpress.com/signup/

Isian: Alamat Email

Nama Pengguna Password/Kata Sandi Alamat Blog: Nama alamat yang diinginkan

2. ISI BIO: Isilah

biografi singkat

tentang

perusahaan

Mengisikan Biografi pada perusahaan/organisasi, terdapat 3 isian yang harus ditulis yaitu apa judul yang diinginkan, apakah anda/organisasi anda memiliki slogan, bahasa yang

diinginkan untuk dipakai (pilih Bahasa Indonesia).

11 | P a g e

Isian: Judul Blog anda

Slogan Blog Bahasa

Jika melakukan fungsi Edit pada Judul dan Slogan Blog, bisa menuju ke:

Dashboard >> Appearance >> Customize:

Lalu akan muncul halaman baru dengan fungsi-fungsi di

kanan yang sesuai dengan kebutuhan: Custom Design: fungsi yang digunakan untuk akun

wordpress premium jika ingin menambahkan fungsi Javascript pada website/ blog wordpress anda

Colors: memilih tema warna yang ingin dipakai pada web

12 | P a g e

Headers: untuk mengganti/ menambahkan/

menghilangkan gambar header website

Menus: terdapat 2 jenis, Main Menu & Social Menu

Main Menu menu yang muncul diatas/sebagai header website. Contoh pada website studi kasus adalah: Men

Shoes/ Testimonial/ Contact Us

Social Menu menu social, yang muncul dibawah/sebagai footer website, bisa lebih dari satu, diedit melalui menu:

Dashboard>> Appearance>> Menu>> Create new menu

Front: halaman depan yg ingin ditampilkan, terdapat 2 jenis, Latest Post dan Static Page.

Latest Post: menampilkan update/post terbaru yang dimiliki

Static Page: kita memilih 1 post yang ingin selalu

ditampilkan, misal di halaman depan kita, misal selalu menampilkan halaman Kontak Kami (Contact Us), bisa diubah sewaktu-waktu sesuai keinginan.

Site Title: digunakan untuk editing judul website/blog kita,

serta slogan yang ingin ditampilkan di depan.

Area Social Menu (bawah)

Area Main Menu (atas)

13 | P a g e

Theme Options: pilihan untuk tampilan awal website

3. PILIH TEMA:

memilih tema wordpress

Pemilihan theme atau tema wordpress dapat diakses melalui

link: http://www.wordpress/themes Atau melalui menu: Dashboard>> Appearance >> Themes

Editing Site Title

14 | P a g e

3.2 Dashboard Dashboard adalah menu utama pada halaman Administrasi Area, di bagian kiri

terdapat semua fungsi utama dashboard, total terdapat 13 fungsi utama yang dapat

langsung dilihat dibawah ini:

Fungsi-fungsi Dashboard:

Store Posts

Media Links

Pages Comments Feedback

Appearance Users

Tools Settings

Langkah-langkah Link & Keterangan

1. Home Home: Halaman dashboard dari wordpress anda, contohnya adalah: https://gudangsepatu88.wordpress.com/wp-admin/index.php

2. Store: Halaman yang dapat mengubah tipe blog wordpress

menjadi akun berbayar atau premium, salah satu

15 | P a g e

perbedaan mendasarnya adalah, menghilangkan kata

wordpress pada link pengguna. Sebagai contoh pada studi kasus gudangsepatu88, halaman ini bisa diakses di:

https://gudangsepatu88.wordpress.com/wp-admin/paid-upgrades.php *)gudangsepatu88 diganti dengan nama

website atau blog anda.

3. Media: Fungsi ini digunakan untuk menambahkan media baik berupa:

Gambar (.jpg .png) Audio & Video (.mp3 .mp4)

Select Files, memilih file dari

komputer

16 | P a g e

3.3 Comments Fungsi Comments digunakan untuk moderasi comments yang masuk pada posting

dan pages kita dari user lain. Kita dapat melihat Comments akan muncul pada Pages

dan Posting apa, serta dapat melakukan fungsi hapus pada komentar yang tidak kita

inginkan.

3.4 Pages Pages adalah fungsi yang akan muncul di menu utama website/blog kita. Berbeda

dengan Category, Pages berfungsi sebagai halaman tunggal yang akan mempunyai

fungsi tertentu seperti:

Home: halaman depan website

Contact Us: penjelasan tentang organisasi/perusahaan/produk/jasa yang kita jual

Testimonial: Berisi testimonial

Langkah-langkah Link & Keterangan

1. Membuat Pages

baru

Membuat fungsi utama baru dibagian atas website atau

blog utama kita. Kita dapat menambahkan halaman Kontak, Testimonial disini.

Fungsi ini diakses melalui: Dashboard>> Pages>> Add New

17 | P a g e

2. Maintenance

Pages Kita dapat melakukan editing terhadap Pages yang sudah kita miliki, cukup klik pada Page yang akan diedit, lalu

lakukan editing.

Fungsi:

Edit |Quick Edit |Trash |View

Pada contoh website AMBLE FOOTWEAR,

kategori MEN (parents) memiliki kategori

lagi (child) yaitu Accesories, Footwear,

Shoelace dan Bags.

Fungsi ini memungkin

Pages dapat disusun

berdasarkan Parents dan

Child. Jika ingin sebuah

Pages berada di bawah

kategori (X) tertentu,

maka pilih Parents>>

Kategori X.

Jika ingin menjadi fungsi

utama, pilih no parents.

Klik Trash untuk

menghapus

18 | P a g e

3.5 Posts 1. Membuat Posting Baru

Membuat post baru, semisal anda mempunyai tambahan produk baru, bisa melakukan penambahan post baru,

melalui:

Dashboard>> Posts>> Add New

Judul Posting Judul Posting Menambah

kan

Gambar,

Polling &

Form

Kontak

Editor WYSIG ―What

you see is what you

get‖ (fungsi

menyerupai MS Word)

Halaman Edit

Page

19 | P a g e

2. Membuat Category Baru

Posts bisa dikategorikan dengan melakukan diferensiasi pada Category pada post tersebut. Dalam studi kasus

http://gudangsepatu88.wordpress.com memiliki 2 Category:

Men Shoes & Women Shoes

Category Men Shoes akan memunculkan semua Posts yang memiliki tags ―men shoes‖, begitu pula

dengan tags ―woman shoes‖. Cara menambahkan Category, dapat dilakukan melalui:

Dashboard>> Posts>> Categories

Setiap Posts dapat dibedakan berdasarkan

Category, jangan lupa beri centang untuk

Category yg benar.

Menambahkan/mengurangi Category ada

pada + Add New Category, atau pada

menu Dashboard>> Posts>> Category

Menu editing untuk

menambahkan,

mengganti, mengurangi

Category

20 | P a g e

3.6 Widget Widget adalah fungsi-fungsi tambahan yang bisa ditampilkan di halaman website kita,

seperti link akun Facebook, Calendar, dan links lain. Terdapat 2 macam letak, di

samping dan di bawah, bergantung pada tema yang kita pilih.

Klik pada category yang

diinginkan untuk melakukan

editing atau bahkan menghapus

category

21 | P a g e

Widget: Facebook Like Box

Fungsi ini akan menampilkan &

mempromosikan FB page kita

di website, serta menambah

Likes pada Page yg kita buat.

22 | P a g e

Referensi Kiang, Melody Y., T. S. Raghu, and Kevin Huei-Min Shang. "Marketing on the

Internet—who can benefit from an online marketing approach?." Decision Support

Systems 27.4 (2000): 383-393.

Tentang Penulis

Penulis: Irmasari Hafidz, S.Kom, M.Sc

Penulis adalah dosen tetap pada Jurusan Sistem Informasi, Fakultas Teknologi

Infomasi ITS, Surabaya. Menyelesaikan pendidikan sarjana Sistem Informasi di ITS

(Sarjana Komputer) tahun 2007 dan pasca sarjana Business Information Technology

di Universiteit Twente, Belanda (Master of Science) tahun 2011. Selain mengajar,

bergabung secara aktif di berbagai kegiatan EcoCampus ITS, mendirikan organisasi

non-profit berlisensi dari TED.com (United States) yaitu TEDxITS

(http://tedx.its.ac.id) serta menjadi konsutan IT untuk beberapa project IT di

berbagai organisasi dan lembaga pemerintah. Penulis dapat dihubungi secara online

pada akun twitter @ir_hafidz atau email di irma(at)is.its.ac.id.

Co-Penulis: Arief Bahari, S.Sn

Penulis adalah Sarjana lulusan Desain Produk, Fakultas Teknologi Sipil dan

Perencanaan ITS, Surabaya. Setelah lulus ia meneruskan karirnya sebagai designer

grafis freelance hingga saat ini dan telah terlibat dalam berbagai macam proyek

selama 5 tahun terakhir. Penulis dapat dihubungi secara online pada akun twitter

@ariefbah atau email di ariefbahari(at)gmail.com.