3E D4 - Kelompok 5
3E D4 - Kelompok 5
WEB PUBLISHING
“tukusepatuku.com”
Oleh:
Kelas 3E – D4
Kelompok 5
ADITYA PRATAMA PUTRA 1642620101
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
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
sebelum Login ke Cpanel, Kami pastikan dulu sudah menjadi user resmi Jagoan Hosting.
9
STEP 2: Pada Client Area, Kami masuk ke layanan dan pilih Manage Layanan.
STEP 3: Lalu kami memilih produk yang telah kami beli dan sedang aktif.
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.
STEP 5: Lalu kami ditampilkan halaman penuh berisi fitur-fitur CPanel yang bisa
memungkinkan kami untuk mengontrol CPanel kami sepenuhnya.
11
4.1.2 Tampilan Admin Wordpress
Tampilan admin dalam wordpress meliputi:
- Dashboard adapun beberapa tampilan yang ada pada halaman dashboard yaitu:
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.
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.
- 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.
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
17
Gambar 11 WooCommerce Status
18
- Product dalam product berisikan semua produk yang ditawarkan beserta
kategori warna dan harganya.
- 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.
19
Gambar 15 salah satu Plugin tukusepatuku.com
- Users ini berisikan profile pemakai web maupun admin web tersebut.
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.
- Halaman Ongkir berisikan biaya ongkos kirim dan jasa pengiriman yang
bekerjasama dengan tukusepatuku.com.
21
Gambar 19 Tampilan Ongkos Kirim
22
Gambar 20 Penampang Indeks tukusepatuku.com
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.
24
Gambar 23 Penampang Tampilan Kategori KIDS
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.
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