LAPORAN HASIL PEMBUATAN WEB

WEB PUBLISHING
“tukusepatuku.com”

Oleh:
Kelas 3E – D4
Kelompok 5
ADITYA PRATAMA PUTRA 1642620101

AYU ROHMAWATI 1642620120

DHEA RATU PRIADI 1642620008

DWI NUR CAHYO 1642620213

RIYAN IMAS PRADITIA 1642620086

PROGRAM STUDI D-IV MANAJEMEN PEMASARAN

JURUSAN ADMINISTRASI NIAGA
POLITEKNIK NEGERI MALANG
2019

1
DAFTAR ISI

2
DAFTAR GAMBAR/TABEL

3
 BAB I
PENDAHULUAN
1.1 Latar Belakang
Web publishing adalah mata kuliah membuat situs Web dan meletakkannya di Web
server (pelayanan web). Sebuah situs Web adalah kumpulan halaman HTML biasanya
dengan halaman awal bernama index[dot]html. Situs web ini dirancang menggunakan
perangkat lunak authoring web yang menyediakan kemampuan tata letak grafis atau
dengan pembacaan peng-kode-an dalam HTML (coding HTML) atau keduanya.
Mendistribusikan situs memerlukan penyalinan halaman HTML yang dihasilkan dan
elemen-elemen grafis ke dalam direktori yang sesuai pada server.
Dalam mata kuliah ini ada sebuah projek membuat sebuah web dengan
menggunakan wordpress dengan tema e-commerce/ service. Kelompok kami memilih
untuk membuat tema e-commerce dengan alamat “tukusepatuku.com”, alasan kami
memilih tema ini karena tema ini cukup digemari kalangan baik dewasa, remaja, lelaki
maupun perempuan akhir-akhir ini. Harapan kami dengan adanya web yang kami buat
dapat mempermudah siapa saja dalam pembelian sepatu berbasis online, dengan warna,
merk serta model yang dibutuhkan dan diinginkan banyak kalangan.

4
 BAB II
LANDASAN TEORI
2.1 Pengertian e-Commerce
e-Commerce merupakan prosedur berdagang atau mekanisme jual-beli di internet
dimana pembeli dan penjual dipertemukan di dunia maya. e-Commerce juga dapat
didefinisikan sebagai suatu cara berbelanja atau berdagang secara online atau direct selling
yang memanfaatkan fasilitas Internet dimana terdapat website yang dapat menyediakan
layanan “get and deliver“.
e-Commerce akan merubah semua kegiatan marketing dan juga sekaligus
memangkas biaya-biaya operasional untuk kegiatan trading (perdagangan). Proses yang
ada dalam E-commerce adalah sebagai berikut :
a. Presentasi electronis (Pembuatan Website) untuk produk dan layanan.
b. Pemesanan secara langsung dan tersedianya tagihan.
c. Otomasi account Pelanggan secara aman (baik nomor rekening maupun nomor kartu
kredit)
d. Pembayaran yang dilakukan secara Langsung (online) dan penanganan transaksi (Januri,
dkk, 2008).
2.2 Desain Web
2.2.1 Pemilihan Alamat Domain
Jika website diibaratkan sebagai produk, maka domain adalah merk.
Penggunaan domain yang menarik akan membuat orang tertarik untuk memasuki
suatu website. Dengan pemilihan nama domain yang unik juga membuat orang
mudah mengingatnya untuk nantinya dikunjungi kembali.
2.2.2 Hosting

Tidak kalah pentingnya dengan domain, hosting memiliki peran untuk

menyimpan semua database (script, gambar, video, teks dan lain sebagainya) yang
diperlukan untuk membentuk suatu website. Banyak sekali penyedia jasa hosting
di Indonesia, salah satunya Jagoan Hosting yang kami pakai dalam pembuatan web
kali ini.

5
2.2.3 Pemilihan Navigasi
Navigasi web juga sangat penting dalam pembuatan web. Navigasi web
harus jelas dan sangat membantu pengunjung wev agar mereka benar-benar puas
dengan apa yang ditawarkan dalam web tersebut.
2.2.4 Typography
Jenis-jenis Huruf
Menurut James Craig (seperti dikutip Perdana, 2007) huruf diklasifikasikan
ke dalam beberapa jenis, yaitu:
a. Roman. Ciri dari huruf ini adalah memiliki sirip/kaki/serif yang berbentuk lancip pada
ujungnya. Huruf Roman memiliki ketebalan dan ketipisan yang kontras pada garis-
garis hurufnya. Kesan yang ditimbulkan adalah mengekspresikan organisasi dan
intelektualitas, klasik, anggun, lemah gemulai.
b. Egyptian. Jenis huruf yang memiliki ciri kaki/sirip/serif yang berbentuk persegi seperti
papan dengan ketebalan yang sama atau hampir sama. Kesan yang ditimbulkan adalah
kokoh, kuat, kekar dan stabil.
c. Sans Serif. Pengertian Sans Serif adalah tanpa sirip/serif, jadi huruf jenis ini tidak
memiliki sirip pada ujung hurufnya dan memiliki ketebalan huruf yang sama atau
hampir sama. Kesan yang ditimbulkan oleh huruf jenis ini adalah modern,
kontemporer dan efisien.
2.2.4 Penataan Feed
Dalam penataan web atau biasa disebut dengan feed harus sangat
diperhatikan karena feed yang sangat berantakan dapat membuat pengunjung
menjadi bosan bahkan baru melihat halaman awalnya saja mereka sudah tidak
minat lagi untuk kembali masuk dalam web tersebut.

6
 BAB III
DESAIN DAN PERANCANGAN
3.1 Analisis Perancangan Sistem
3.1.1 Analisis Kebutuhan Hardware
- Laptop Utama, dengan sistem operasi Windows.
- Memori Tambahan
- Sebuah Monitor Besar
- Perangkat Mobile/Smartphone
3.1.2 Analisis Kebutuhan Software
- Wordpress
- Corel Draw
3.2 Rancangan Tampilan System
1. Pengunjung mengakses Website Toko Online ( https://tukusepatuku.com )
2. Katalog Produk : Pengunjung dapat melihat koleksi barang yang dijual dari halaman
katalog produk, dapat ditampilkan berdasarkan Kategori dan juga dilengkapi dengan
fasiltias Pencarian Barang, Produk terlaris dan Produk sekategori dengan yang sedang
dibuka.
3. Pencarian Produk/Barang : Fasilitas pencarian barang berdasarkan nama.
4. Kategori Produk/Barang : Fasilitas menampilkan koleksi Barang berdasarkan nama
kategori.
5. Barang Lainnya : Fasilitas menampilkan daftar produk/barang yang terkait dengan barang
yang sedang dibuka (detail).
6. Barang Terlaris : Fasilitas menampilkan daftar produk/barang yang penjualannya paling
laris, sebanyak 8 barang.
7. Pendaftaran Pelanggan/registrasi : Pengunjung dapat melakukan Pendaftaran (membuat
akun login di Website Toko Online), gunanya supaya dapat memesan barang.
8. Login Pelanggan : Pengunjung dapat Login dari akun/user yang sudah dibuat tadi. Setelah
login, Pelanggan juga dapat memperbaiki Profil pelanggan yang sebelumnya sudah dibuat
dari halaman Pendaftaran.
9. Pemesanan/ Beli Barang : Pengunjung yang sudah login (disebut Pelanggan) dapat
memilih dan mencari barang yang diinginkan, lalu klik tombol Beli.

7
10. Keranjang Belanja (Shopping Chart) : Barang yang di-beli akan ditampung ke
dalam Keranjang Belanja, data barang yang sudah dipilih dan masuk dalam keranjang
dapat dibatalkan (dihapus, keranjang belanja ini juga dapat diubah jumlah barang yang
akan dibeli, dengan cara mengganti angka dan klik tombol Simpan.
11. Check Out : Dari keranjang belanja, Pelanggan dapat klik tombol Lanjutkan (Check out)
untuk melanjutkan proses transaksi. Selanjutnya Pelanggan akan melihat semua barang
yang telah dipilih dan semua total harganya (setelah dipotong diskon) dan total biaya
kirimnya. Pelanggan dapat memasukkan Alamat lengkap tujuan pengiriman, lalu klik
tombol Lanjutkan / Simpan.
12. Konfirmasi Transfer : Selanjutnya Pelanggan dapat melakukan pembayaran kepada Toko
Online dengan cara melakukan Transfer ke Rekening yang dimiliki Toko Online,
kemudian melakukan Konfirmasi pembayaran jika sudah transfer.
13. Administrator : Kemudian prosesnya dilanjut dari Administrator, sebagai pengelola Toko
Online.

8
 BAB IV
IMPLEMENTASI DAN EVALUASI
4.1 Tampilan Admin
4.1.1 Tampilan CPanel Hosting

Langkah-Langkah Login Ke CPanel

sebelum Login ke Cpanel, Kami pastikan dulu sudah menjadi user resmi Jagoan Hosting.

STEP 1: Masuk ke member jagoanhosting.com lalu kemudian akun diforward menuju

member.jagoanhosting.com/clientarea.php. Lalu kami tinggal masukkan email address dan
password kami.

Gambar i Cpanel Login (masukkan alamat email dan password)

9
STEP 2: Pada Client Area, Kami masuk ke layanan dan pilih Manage Layanan.

Gambar ii Cpanel Layanan (pilih layanan)

STEP 3: Lalu kami memilih produk yang telah kami beli dan sedang aktif.

Gambar iii Produk Pilihan

10
STEP 4: Saat sudah masuk ke halaman produk, di bagian kiri bawah langsung masuk ke
tab Login to CPanel. Lalu ada tab baru terbuka di browser Kamu.

Gambar iv Login Cpanel (masuk dalam tampilan Cpanel )

STEP 5: Lalu kami ditampilkan halaman penuh berisi fitur-fitur CPanel yang bisa
memungkinkan kami untuk mengontrol CPanel kami sepenuhnya.

Gambar v Tampilan CPanel

11
4.1.2 Tampilan Admin Wordpress
Tampilan admin dalam wordpress meliputi:

- Dashboard adapun beberapa tampilan yang ada pada halaman dashboard yaitu:

 Menampilkan log aktivitas pada website seperti post terbaru, komen

terbaru, dll.

 Menampilan sekilas mengenai website seperti total artikel, halaman,

komentar, tema, dan spam. Jika kita klik link tersebut maka kita akan
diarahakan ke halaman yang bersangkutan.
 Quick Draft yang berfungsi untuk membuat artikel secara instan. Fitur ini
sangat berguna jika mendapat ide – ide yang melintas di pikiran dan ingin
langsung menuliskan judul dan isi artikel. Artikel yang ditulis akan
tersimpan dalam draft.
 Menampilkan berbagai tombol umum seperti write your first blog
post untuk memulai membuat post baru pada editor.
 Pada bagian atas halaman dashboard terdapat navigasi Screen Options yang
berisi kotak – kotak centang untuk menampilkan menu yang dicentang.

Gambar 1Dashboard

12
- Post, dalam post ini berisikan beberpa postingan yang telah dilakukan oleh
admin untuk mengisi web. Dalam post ini berisikan all post, add new post,
categories, tags.
a. All post berisikan semua postingan yang telah diposting dalam web.
b. Add new post digunakan ketika admin akan membuat postingan terbaru.
c. Categories berisikan semua kategori postingan yang akan diposting dalam
web. Berikut kategori dalam web tukusepatuku.com :
1. Kids
2. Man
3. Sepatu Boots
4. Sepatu Formal
5. Sepatu Kasual
6. Sepatu Slip-on
7. Sepatu Sneakers
8. Women
9. Sandal
10. Sepatu Boots
11. Sepatu Flat
12. Sepatu Hak
13. Sepatu Wedges
d. Tags, digunakan untuk edit kata kunci.6. Media, merupakan tempat untuk
menyimpan file dengan format JPG / JPEG, PNG, GIF, PDF,DOC, dsb.

Gambar 2 all post

13
 Gambar 3 categories
- Sub menu media
a. Library, berisi tentang daftar file-file yang sudah di upload oleh admin.
b. Add new , untuk menambahkan file dengan mengupload file dari
komputer atau internet ke website.

Gambar 4 media (library)

- Pages, hampir sama dengan post namun ini bersifat statis dan tidak terikat
oleh categories, tanggal dan tags.
a. All pages, untuk mengedit pages yang sudah ada dan menampilkan semua
pages/halaman.

b. Add new, untuk menambah pages baru.

14
 Gambar 5 pages (all pages)

- Comment, berisikan komentar dari pembaca web, atau keluhan yang dirasakan
pemesan/pembeli serta saran dan masukan bagi penjual.

Gambar 6 Comment

15
- Feedback digunakan untuk adanya feedback dari para pembaca web.

Gambar 7 Feedback

- WooCommerce, berisikan :

a. Orders, untuk mengetahui siapa yang memesan produk dana apa pesanan
dari pelanggan.
b. Coupons, untuk memberikan diskon dan kupon pembelian untuk
pelanggan tertentu dan produk tertentu.
c. Reports, sebagai catatan jumlah penjualan setiap bulannya/tahunnya.
d. Settings untuk mengatur alamat toko, kode pos toko.
e. Status mencatat semua kegiatan web termasuk dengan proses kegiatan jual
beli dalam web.

16
 Gambar 8 WooCommerce Order

Gambar 9 WooCommerce Coupon

Gambar 10 WooCommerce Reports

17
Gambar 11 WooCommerce Status

Gambar 12 WooCommerce Settings

18
- Product dalam product berisikan semua produk yang ditawarkan beserta
kategori warna dan harganya.

Gambar 13 All Product Gambar 14 Attribute

- Appearance
a. Themes, untuk mengganti tampilan desain web
b. Customize, menu yang berfungsi mengedit tata letak halaman website,
disini bisa mengedit tampilan dengan di sediakan tampilan blog secara
langsung.
c. Widget, untuk menambahkan elemen pada sidebar / sisi samping kanan
dan kiri website.
d. Menus, digunakan untuk mengelola (membuta, menghapus, melihat) menu
pada website.
e. Header, untuk mengatur bagian header pada website.
f. Background, untuk mengatur background dari website.
g. Editor, untuk menambah atau mengurangi kode/ script code.10. Users,
merupakan menu untuk setting identitas penulis atau pemilik blog.

- Plug In adalah kode software dengan fungsi tertentu yang memungkinkan

aplikasi atau program untuk menjalankan fitur tambahan di aplikasi atau
program tersebut. Dalam web tukusepatuku.com memakai 2 plugin yaitu
WooCommerce dan Jetpack dengan kesesuaian dengan tujuan dari web
tersebut.

19
 Gambar 15 salah satu Plugin tukusepatuku.com

- Users ini berisikan profile pemakai web maupun admin web tersebut.

Gambar 16 Halaman Menambahkan Profile/Users

- Tool untuk pengembangan web. Tools atau peralatan dalam mengembangkan

aplikasi merupakan bagian penting karena akan sangat membantu dan
mempersingkat proses pengembagan. Tools atau peralatan yang dimaksud
disini adalah perangkat lunak yang atau software digunakan dalam proses
pengembangan website.

20
 Gambar 17 Tampilan dari Tool

- Settings disini berisikan pengaturan mulai dari alamat email, alamat domain,
alamat toko, tanggal pembuatan web, mengubah avatar admin, penyimpanan
memori media, tampilan tambahan member (wp-member) dan keamanan
privasi.

Gambar 18 Tampilan dari Settings

- Halaman Ongkir berisikan biaya ongkos kirim dan jasa pengiriman yang
bekerjasama dengan tukusepatuku.com.

21
 Gambar 19 Tampilan Ongkos Kirim

Demikian isi dari tampilan admin.

4.2 Tampilan User

4.2.1 Halaman Index

Halaman indeks adalah halaman depan dari sebuah web atau halaman utama
dari web itu sendiri. Dalam web tukusepatuku.com berisikan semua menu yang
dibutuhkan para pembaca web mulai dari alamat email admin, alamat toko, contact,
waktu buka-tutup, register untuk yang baru menjadi member, ada menu login untuk
member login dan membeli barangnya, ada menu beli dengan ikon keranjang untuk
member yang hendak membeli, menu pencarian bagi member atau pembaca mudah
mencari apa yang diinginkan dan butuhkan, menu yang sudah terkategori (men,
women, kids, sale) lebih memudahkan untuk member atau pembaca mendapatkan
yang dibutuhkan, dan beberapa penampang sepatu yang ditawarkan lengkap beserta
harganya.

22
 Gambar 20 Penampang Indeks tukusepatuku.com

4.2.2 Halaman Kategori

4.2.2.1 Tampilan SUB Kategori 1
Tampilan SUB Kategori 1 dalam tukusepatuku.com ditampilkan
dengan nama menu MEN. Dalam menu MEN ada beberapa menu lagi yang
lebih spesifik yaitu sandal, sepatu, sepatu boot, sepatu formal, sepatu
kasual, sepatu slip-on, sepatu sneakers. Dalam menu kategori men tersebut
jika di klik maka akan tampil beberapa gambar sepatu lelaki yang
ditawarkan lengkap beserta harganya.

Gambar 21 Penampang Tampilan Kategori MEN

23
4.2.2.2 Tampilan SUB Kategori 2
Tampilan SUB Kategori 2 dalam tukusepatuku.com ditampilkan
dengan nama menu WOMEN. Dalam menu WOMEN ada beberapa menu
lagi yang lebih spesifik yaitu sandal, sepatu boot, sepatu flat, sepatu hak,
sepatu wedges. Dalam menu kategori women tersebut jika di klik maka
akan tampil beberapa gambar sepatu perempuan yang ditawarkan lengkap
beserta harganya.

Gambar 22 Penampang Tampilan Kategori WOMEN

4.2.2.3 Tampilan SUB Kategori 3

Tampilan SUB Kategori 3 dalam tukusepatuku.com ditampilkan
dengan nama menu KIDS. Dalam menu KIDS ada beberapa saja gambar
sepatu anak yang ditawarkan lengkap beserta harganya.

24
 Gambar 23 Penampang Tampilan Kategori KIDS

4.2.2.4 Tampilan SUB Kategori 4

Tampilan SUB Kategori 4 dalam tukusepatuku.com ditampilkan
dengan nama menu SALE. Dalam menu SALE ada beberapa gambar sepatu
yang sangat sering dicari orang atau yang banyak dibeli/terlaris baik
perempuan, lelaki maupun anak-anak yang ditawarkan lengkap beserta
harganya.

Gambar 24 Penampang Tampilan Kategori SALE

25
4.2.3 Halaman Login
Dalam tukusepatuku.com ada menu login dimana diperuntukkan bagi
member lama yang sudah punya akun ataupun bagi admin sendiri. Berikut
penampang tampilan halamannya.

Gambar 25 Penampang Halaman Login Member/Admin

4.2.4 Halaman Register

Dalam tukusepatuku.com ada menu register dimana diperuntukkan bagi
member baru untuk mendaftarkan/menambahkan akun baru. Berikut penampang
tampilan halamannya.

Gambar 26 Penampang Halaman Register Member

26
 BAB V
PENUTUP

5.1 Kesimpulan
5.2 Saran

27
 DAFTAR PUSTAKA

file:///C:/Users/User/Downloads/Documents/Chapter%20II.pdf
https://www.dumetschool.com/blog/Teori-Tipografi-Jenis-Huruf-Part-1
https://www.niagahoster.co.id/blog/pengertian-website/
http://sakulo17.blogspot.com/2015/08/perangkat-untuk-pengembangan-web-part-1.html

28