2. 2
Studi Kasus
X memiliki usaha catering penganan (snack)
tradisional. X biasa menerima pesanan melalui
telepon, sms atau akun facebook. X biasa menerima
pembayaran secara tunai atau transfer bank. X ingin
memasarkan usahanya lebih luas menggunakan media
website.
3. 3
Tahap Perencanaan
● Sasaran pengguna
● Kebutuhan pengguna
● Peta website (sitemap)
● Sketsa tata letak website
● Tema website
● Pembuatan website
● Domain website
4. 4
Sasaran Pengguna
● Kegiatan yang membutuhkan snack :
– Acara ulang tahun, syukuran, pernikahan Rumah
Tangga
– Rapat, acara kebersamaan Kantor / Perusahaan
– Acara lain : Umum
5. 5
Kebutuhan Pengguna
● Kebutuhan pengguna :
– Menu snack (foto, deskripsi, harga .dll)
– Paket snack
– Kontak (telepon, email, alamat, social media .dll)
– Cara pemesanan & pembayaran
– Testimoni pelanggan
8. 8
Tema Website
● Tema (theme) yang dipilih sebaiknya :
– Sederhana tapi menarik
– Bisa menampung banyak informasi
– Teks nyaman dibaca segala usia
– Mudah digunakan (khusus navigasi)
9. 9
Pembuatan Website (1)
● Buat website baru di Google Site
– Login di http://sites.google.com
– Klik Create
– Select template to use : Blank Template
– Name your site : Jajanan Sehat Enak
– Site location : [nama unik] contoh: yohanesgultom
– Type the code shown (validasi)
– Klik Create (di atas halaman)
11. 11
Pembuatan Website (2)
● Page Home
– Klik Edit Page
– Ketikkan kata pembuka/pengantar
– Masukkan gambar : Insert > Image > Choose File
gambarhome.jpg > Click Picture > Click OK
– Setelah gambar masuk, click dan click button M
– Klik Save untuk menyimpan
13. 13
Pembuatan Website (2)
● Halaman Menu
– Click New Page untuk membuat halaman baru
– Name your page : Menu
– Click Create
– Click Edit Page untuk mengedit halaman Menu
– Click Layout > Two Column (simple)
– Masukkan masing-masing 3 menu di tiap kolom (lihat
contoh)
15. 15
Pembuatan Website (3)
● Halaman Paket
– Buat halaman baru dengan nama Paket
– Edit page, masukan tabel dengan cara klik Table > Inser
Table > 4x5
– Masukan data paket seperti contoh
– Masukan gambar paket1.jpg, paket2.jpg, paket3.jpg,
paket4.jpg di bawah tabel seperti contoh
17. 17
Pembuatan Website (4)
● Halaman Video
– Buat halaman baru dengan nama Video
– Masukan video dengan cara Insert > Video > Youtube >
Copy-Paste link youtube
– Masukan dan susun 2 video ini di halaman Video :
● Cara Membuat Kue Lumpur
http://www.youtube.com/watch?v=WvR2z86HZu0
● Cara Membuat Brownies Kukus
http://www.youtube.com/watch?v=vVB860K0Mvs
19. 19
Pembuatan Website (5)
● Halaman Hubungi Kami
– Buat halaman baru dengan nama Hubungi Kami
– Masukan peta dengan cara klik Insert > Map
– Ketik di Enter location : Raeburn Park Singapore dan tekan Enter
– Hapus placemark Raeburn Park dengan meng-klik tanda silang
dibawah search box (lihat gambar)
– Tambahkan placemark baru dengan meng-klik Drop a Placemark &
meng-klik titik di peta
– Klik Select untuk menyimpan
– Include title : Jajanan Sehat Enak
– Klik Save
22. 22
Pembuatan Website (6)
● Menambah navigasi horizontal (horizontal navigation)
– Klik More > Edit Site Layout
– Klik button Horizontal Navigation
– Klik area horizontal navigation yang baru muncul di bawah
judul halaman
– Klik Add Page untuk menambahkan halaman Menu, Paket,
Video
– Pilih Style : Tabs
– Klik OK dan kemudian klik Close
24. 24
Pembuatan Website (7)
● Mengubah tema, warna & font website
– Klik More > Manage Site
– Klik Themes, Colors and Fonts di menu sebelah kiri layar
(opsi paling bawah)
– Pilih Entire Page > Background > Color : masukkan
#FAF2A0
– Pilih Site Header > Title : ubah font menjadi Kavoon,
color Red (#ff0000), size 36pt
27. 27
Domain Website
● Website yang dibuat di google site dapat diakses oleh publik
melalui http://sites.google.com/site/namawebsite
● Jika kita sudah memiliki domain kita dapat menggunakannya
sebagai alias untuk website kita
● Domain umum seperti .com .co.id .net .org dapat dibeli di website
seperti domainesia.com, masterweb.com, rumahweb.com .dll
● Harga domain berkisar Rp 85.000 – Rp 150.000 / tahun
● Tersedia juga domain gratis seperti .tk (www.dot.tk) .co.nr (
www.freedomain.co.nr) .dll