1. Panduan CMS
1.0 Pendaftaran CMS
o Anda perlu melakukan pendaftaran di http://sharksurf.localdns.com
o Setelah selesai pendaftaran anda akan menerima email yang mengandungi nama pengguna
(username) dan kata laluan (password)
o Anda akan menerima email-email seperti tajuk di bawah selepas akaun anda berjaya di
daftarkan
 TotalWEB! Lite Configurations – namadomain.com
 SharkSURF Registration Successfully – namadomain.com
 SharkSurf Server Configuration File – namadomain.com
o Maklumat untuk anda akses ke akaun web CMS anda berada dalam email TotalWEB! Lite
Configurations
 Access : Link login iaitu http://login.totalweblite.com
 Account details: Mengandungi maklumat username dan password
 User guide: Panduan pengguna dalam format PDF
o Anda hanya perlu gunakan maklumat dalam email ini sahaja untuk akses ke web CMS anda.
*Nota:
Sharksurf Configuration File: Mengandungi maklumat untuk akses ke akaun FTP anda. Melibatkan hal-hal teknikal.
Sharksurf Registration Sucessfully: Email memberitahu anda bahawa akaun telah berjaya di daftarkan. Mengandungi maklumat link login ,
username dan password untuk perkara berikut :-
 MobileACE! and TotalWEB! Lite Control Panel
 Website (Plesk) Control Panel
 E-mail Control Panel
 iBeli.com Control Panel
TotalWEB! Lite Configurations : Mengandungi maklumat untuk anda akses ke laman web CMS anda. Maklumat adalah seperti pautan
untuk akses, username dan password serta manual pengguna dalam format PDF
2.0 Daftar Masuk
o Buka pelayar internet anda (Firefox atau Internet Explorer) dan pada bar alamat pelayar
internet anda taipkan alamat seperti ini http://login.totalweblite.com
o Masukkan nama pengguna (contoh: ahmad) dan katalaluan (contoh: XTJ8Y5)
o Seterusnya tekan butang Login
*Nama pengguna dan katalaluan akan diberikan melalui email
Gambarajah 1.0 : Paparan muka depan ketika daftar masuk
1|Page

2. Panduan CMS
3.0 Panel Kawalan Pengguna
o Setelah berjaya daftar masuk anda akan dibawa ke halaman panel kawalan pengguna seperti
dalam gambarajah 1.1.
o Di bahagian ini anda akan lihat pelbagai menu dan ikon gambar untuk membina atau
mengubahsuai laman web anda.
o Berikut penerangan ringkas mengenai fungsi setiap menu ikon:
Home: Halaman utama panel kawalan
Template: Susun atur kedudukan menu, logo, sepanduk, kandungan dalam laman web
Add Page: Menambah halaman baru ( contoh: borang, testimonial, album, hubungi )
Add On: Fungsi nilai tambah untuk web anda ( web counter, analytic, adsense, SEO)
Manage: Mengurus dan menadbir halaman yang telah dibina
Store: Menempatkan produk-produk anda
Membership: Sistem keahlian untuk bakal pelanggan anda
Resources: Sumber rujukan anda dalam pembinaan web
Preview: Melihat pratonton laman web yang terkini
Gambarajah 1.1 : Panel kawalan pengguna
4.0 Langkah Membina Laman Web
4.1 Menetapkan struktur web
o Tekan template dan kemudian Website Setting
o Masukkan ruangan kosong dan kemaskini bahagian berkaitan
o Apabila selesai sila simpan tetapan anda
*Anda boleh kemaskini bahagian ini atau ubahsuai Menu Style pada bila-bila masa sahaja
2|Page

3. Panduan CMS
Gambarajah 1.2 : Tetapan struktur laman web
4.2 Memilih template
o Tekan pada Choose Template atau ikon gambar Template di bahagian atas
o Di bahagian ini anda diberi pilihan untuk membina template sendiri (DIY) atau menggunakan
template sedia ada.
Gambarajah 1.3 : Memilih template
4.2.1 Membina template sendiri * Do-It-Yourself
o Apabila anda memilih template ini pastikan anda mengemaskini semua ruang yang ada dan
simpan (save)
o Ruang-ruang yang perlu anda kemaskini adalah
 Background & Content
 Header & Footer
 Menu
 Side Content
 Tekan Preview untuk lihat hasil laman web anda
*Tidak digalakkan ubah suai CSS (edit CSS). Anda perlukan kemahiran coding untuk ubahsuai template
3|Page

4. Panduan CMS
Gambarajah 1.4 : DIY template
4.2.2 Memilih template sedia ada
o Tekan Latest Template untuk lihat template terkini
o Sekiranya anda ingin memilih template mengikut kategori sila tekan All Template
o Bawa ke bawah dah pilih kategori seperti gambarajah 1.5
o Tekan Enlarge untuk besarkan gambar dan tandakan pada bulatan untuk menetap pilihan
template anda seperti dalam gambarajah 1.6
o Jangan lupa untuk simpan pilihan anda.
o Tekan Preview untuk lihat laman web anda
Gambarajah 1.5 : Memilih template mengikut kategori
4|Page

5. Panduan CMS
Gambarajah 1.6 : Memilih template sedia ada
4.3 Menambah laman baru
o Anda boleh menambah laman baru pada bila masa sahaja
o Tekan pada menu Add Page
o Pilih jenis laman yang anda inginkan
o Keterangan ringkas beberapa jenis laman
 Webpage: Laman baru kosong untuk memasukkan teks dan
gambar. Terhad kepada 25 laman baru. Contoh: Home, About Us,
Company Profile
 Product Catalogue: Bina katalog untuk produk anda dan hubung
terus dengan kedai online (shopping cart). Terhad kepada 2 jenis
katalog dengan 10 jenis barang setiap satu.
 Photo Album: Memasukan gambar perniagaan anda. Terhad kepada
2 album dengan 10 gambar setiap satu.
 Enquiry Form: Borang maklum balas
5|Page

6. Panduan CMS
Gambarajah 1.7 : Menambah laman
4.3.1 Webpage
o Isi ruang yang perlu seperti Menu Title, Page Title,
o Masukkan kandungan dan gambar dalam ruang yang disediakan
o Gunakan Content Editor membuatkan laman anda lebih menarik
Gambarajah 1.8 : Webpage
6|Page

7. Panduan CMS
o Keterangan ringkas:
 Menu Title: Tajuk menu seperti Home, About Us, Company Profile
 Page Title: Tajuk laman anda secara ringkas. Penting untuk SEO
 Enable Sidebar: Pilihan untuk menu tepi
 Bookmark & Share: Pilihan untuk anda benarkan pelawat berkongsi laman anda
kepada orang lain.
 Published: Tetapan sama ada anda mahu laman yang dibina diterbit atau tidak
 View Sample Content: Lihat contoh menghasilkan kandungan yang baik
 Page Content: Ruang untuk anda menulis isi kandungan
Gambarajah 1.9 : Page Content Editor
*Content Editor terbahagi kepada 2 bahagian: Basic Editor dan Advance Editor
4.3.2 Katalog Product
o Dalam menu Add Page, sila pilih Product Catalogue
o Isikan ruangan yang perlu seperti Menu Title, Page Title, Side bar Category dan sebagainya
 Product Price : Pilihan untuk paparkan harga atau tidak paparkan harga
 Product Weight : Pilihan untuk paparkan berat produk
 Enable Product Review : Tetapan untuk benarkan pelanggan memberikan sebarang
komen
 Approval : Tetapan untuk anda semak komen secara manual atau auto
 Product Listing Layout : Memilih susun atur produk anda
 Product Detail page layout : Susun atur sesuatu produk
 Header & Footer: Masukkan sebarang maklumat produk anda
o Kemudian Save halaman produk anda
Gambarajah 2.0 : Laman Katalog
7|Page

8. Panduan CMS
4.3.2.1 Menambah produk
o Setelah anda berjaya membina laman produk, menu Add Product akan kelihatan di bahagian
tepi kanan seperti dalam gmabarajah di bawah.
o Isi kan ruangan yang perlu
 Choose Category : Pilih kategori produk. Jika tiada, anda boleh tambah.
 Product Name : Nama produk anda
 Produk Code : Berikan kod untuk produk anda
 Product Price: Harga jualan
 Promotion Price : Harga promosi
 Published : Pilihan untuk anda benarkan produk untuk disiarkan atau tidak siarkan
 Product Description : Masukkan keterangan ringkas mengenai produk.. Penting
untuk maklumat pelanggan
 Product Image : Memuat naik gambar produk
o Kemudian Save untuk simpan maklumat
Gambarajah 2.1: Menambah produk
4.3.2.2 Mengurus produk
o Membolehkan anda mengurus produk yang ada dalam katalog anda.
Gambarajah 2.2 : Pengurusan produk
8|Page

9. Panduan CMS
4.3.2.3 Bingkai gambar produk
o Memilih jenis bingkai gambar produk
Gambarajah 2.3 : Memilih bingkai gambar
4.3.2.4 Susunan produk
o Untuk mengubah kedudukan produk dan kategori anda hanya perlu ‘Drag & Drop’ sahaja
Gambarajah 2.4: Susunan produk
4.3.3 Album gambar
o Dalam menu Add Page, klik pada ikon Photo Album
o Isi ruangan seperti Menu Title, Page Title
o Buat tetapan pada Photo Listing Layout untuk susunan gambar
o Masukkan keterangan ringkas dalam Header and Footer
Gambarajah 2.5 : Album gambar
9|Page

10. Panduan CMS
4.3.3.1 Menambah gambar
o Setelah anda berjaya membina halaman album, menu Add Photo akan kelihatan di bahagian
tepi seperti gambarajah di bawah.
o Tekan butan Select & Upload untuk memilih dan memuat naik gambar dari computer anda
Gambarajah 2.6 : Menambah gambar
4.3.3.3 Mengurus Gambar
o Di dalam bahagian ini anda boleh lihat semua gambar yang anda muat naik.
o Anda boleh mengubah tajuk gambar dan masukkan keterangan untuk setiap gambar seperti
dalam gambarajah di bawah.
Gambarajah 2.7 : Mengurus gambar
10 | P a g e

11. Panduan CMS
4.3.3.4 Susunan gambar
o Anda hanya perlu memilih gambar, kemudian Drag & Drop ke posisi yang anda ingini
Gambarajah 2.8 : Susun atur gambar
4.3.4 Membina borang
o Laman ini membolehkan anda membina borang untuk mendapatkan maklumat dari
pelanggan anda
o Anda boleh mendapatkan Enquiry Form ini di dalam Add Page
o Penuhkan ruangan yang perlu di isi seperti Menu Title, Page Title
o Berikan keterangan ringkas di bahagian Header and Footer
o Pastikan anda menekan butang Save untuk simpan
Gambarajah 2.9 : Tetapan borang pertanyaan
3.3.4.1 Memilih jenis borang
o Setelah anda berjaya membina laman borang, menu Choose Forms akan terpapar di
bahagian tepi kanan web
o Menu Choose Forms ini membenarkan anda memilih jenis borang yang di ingini
 Form Type : Jenis borang
 Form Fields : Jenis maklumat yang anda perlukan dari pelanggan/pelawat
 Preview : Contoh borang yang boleh di lihat
11 | P a g e

12. Panduan CMS
Gambarajah 3.0 : Memilih jenis borang
4.3.4.2 Tetapan Email
o Semua maklumat dari pelanggan/pelawat yang mengisi borang akan di hantar ke dalam
email anda
o Di dalam menu Email Setting masukkan email yang sah (email yang selalu anda guna) ke
dalam ruang kosong Add Email Address
o Kemudian klik butang Add
o Anda boleh email lain sekiranya di rasakan perlu
Gambarajah 3.1 : Tetapan Email
4.3.4.3 Melihat maklumat yang di hantar
o Anda boleh lihat maklumat pelanggan yang anda terima di menu View Submission
o Keterangan:
 Sender Name: Nama pelanggan/pelawat
 Post Date: Tarikh hari maklumat di hantar
 View: Lihat maklumat yang dihantar
 Delete: Memadam maklumat
 Status: Maklumat baru atau lama
12 | P a g e

13. Panduan CMS
Gambarajah 3.2 : Melihat maklumat borang
o Klik butang View untuk lihat pertanyaan pelanggan
o Bahagian atas terdapat maklumat dan pertanyaan pelanggan
o Bahagian bawah adalah ruang untuk anda membalas pertanyaan pelanggan
o Tulis di bahagian Reply kemudian tekan butang Reply
o Maklumat ini juga akan dihantar ke lamat email anda, Jadi anda boleh memilih untuk
membalas pertanyaan pelanggan melalui email atau laman web anda
Gambarajah 3.3 : Lihat pertanyaan pelanggan
4.4 Tambah Nilai
o Menu Add On Adalah menu di mana anda boleh menambah fungsi lain ke dalam web anda
 Web Counter : Melihat statistic klik di web anda
 Google Analytics: Menganalisa pelawat web anda
 Search Engine Submission : Menghantar web anda ke enjin carian di internet
13 | P a g e

14. Panduan CMS
Gambarajah 3.4 : Add On
4.4.1 Web Counter
o Anda boleh melihat jumlah statistik pelawat atau jumlah klik web anda dengan fungsi Web
Counter
o Pilih Web Counter dalam menu Add On
o Tandakan Turn On untuk memaparkan Web Counter dalam web anda
o Increment :
 All Hits – Setiap klik akan di kira
 Unique Visitors – Hanya pelawat baru akan dikira, pelawat yang kembali selepas kali
pertama ke web anda tidak di kira
o Starting Count From : Jumlah klik untuk bermula
o Total Hits : Jumlah klik
o Alignment : Posisi Web Counter
o New Count: Masukkan jumlah yang anda mahu mulakan
Gambarajah 3.5 : Web Counter
4.4.2 Search Engine Submission
o Ini adalah bahagian di mana membolehkan anda menghantar web anda ke enjin carian yang
berada di internet seperti Google, Yahoo dan Bing
o Sistem ini membolehkan web anda dihantar ke 1000 enjin carian
o Masukkan maklumat yang diperlukan dan tekan Submit
14 | P a g e

15. Panduan CMS
 Website Address : Alamat web anda. Contoh : http://www.namadomain.com
 Website Title : Tajuk web anda
 Website Keyword : Katakunci-katakunci untuk web anda
 Website Description : Keterangan ringkas mengenai web anda
 Contact Person : Nama anda
 Email Address : Alamat email anda
Gambarajah 3.6 : Search Engine Submission
4.4.3 Google Analytics
o Fungsi Google Analytics membolehkan anda menganalisa/memantau aktiviti pelawat web
anda seperti :
 Bilangan pelawat ke laman web anda
 Apa yang dilihat oleh pelawat
 Bila dan dari mana pelawat itu datang
 Bagaimana pelawat jumpa laman web anda
 Jenis dan masa interaksi di laman web anda
o Mendaftar di http://www.google.com/analytics (boleh login guna Gmail, klik butang Signup)
o Lakukan pendaftaran mengikut arahan dalam Google Analytic
Gambarajah 3.7 : Pendaftaran Google Analytics
o Di akhir pendaftaran anda akan diberikan kod untuk di letak dalam web anda
o Copy kod Google Analytics tersebut
o Pastikan anda tekan Save and Finish di bahagian bawah
15 | P a g e

16. Panduan CMS
Gambarajah 3.8 : Kod Google Analytics
o Klik Google Analytics dalam menu Add On dalam web anda
o Paste kod tadi di dalam ruang kosong
o Pastikan anda tandakan Turn On dan Save
Gambarajah 3.9 : Memasukkan kod Google Analytic
o Tempoh 24 jam diperlukan untuk Google mengeluarkan data
o Untuk memastikan proses anda betul dan berjaya, masuk ke akaun Google Analytic. Tanda √
pada status menandakan Google Analytics anda berjaya di masukkan.
o View Report untuk lihat statistik web anda
Gambarajah 4.0 : Lihat statistik Google Analytics
16 | P a g e

17. Panduan CMS
4.4.4 Favicon
o Favicon adalah gambar yang akan terpapar di sebelah alamat laman web anda
o Anda boleh mencipta favicon anda seperti alamat web yang di beri
o Anda hanya perlu memuat naik fail .ico sahaja di bahagian Browse
o Proses ini mengambil masa 24 jam sebelum favicon keluar di bahagian alamat web
Gambarajah 4.1 : Favicon
4.5 Mengurus laman mukasurat
o Anda boleh mengurus semua laman yang anda bina dalam web anda di bahagian Manage
o Di dalam bahagian ini anda akan melihat senarai laman mukasurat yang anda bina
 Page Title : Tajuk laman mukasurat
 Module : Jenis laman mukasurat
 Copy Link : Pautan setiap laman mukasurat
 View : Lihat laman mukasurat
 Edit : Mengubahsuai laman mukasurat
 Delete : Memadam laman mukasurat
 Publish : Papar atau tidak paparkan laman muklasurat
Gambarajah 4.2 : Mengurus laman mukasurat
17 | P a g e

18. Panduan CMS
4.5.1 Susun atur laman mukasurat
o Menu Edit Page Sequence membolehkan anda menyusun atur laman mukasurat bina.
o Di bahagian ini anda akan lihat laman yang dipaparkan dan di sembunyikan
o Anda hanya perlu menarik ke bawah atau ke atas untuk menyusun laman mukasurat di bina
Gambarajah 4.3 : Menyusun atur laman muka surat
4.0 Memasukkan Google Map
o Anda boleh memasukkan Google Map di dalam bahagian Contact Us
o Klik Add Page dan pilih ikon Contact Us.
o Di bahagian Contact Setting, masukkan maklumat yang diperlukan seperti Menu Title dan
Page Title.
o Masukkan keterangan ringkas di bahagian Header dan Footer
o Masukkan kod HTML Google Map.
 Cari alamat perniagaan anda di http://maps.google.com atau dapatkan maklumat di
Google Place anda.
 Tekan pada butang Link seperti gambarajah 4.1
 Copy kod HTML dan masukkan ke dalam ruang kosong seperti dalam gambarajah 4.2
o Kemudian tekan butang Save untuk simpan.
18 | P a g e

19. Panduan CMS
Gambarajah 4.4 : Kod HTML Google Map
Gambarajah 4.5 : Memasukkan kod HTML Google Map
o Kemudian anda boleh menambah maklumat lain di menu berikut :
 Add Contact : Tambah maklumat hubungi seperti nama, alamat, telefon dan email
 Manage Contacts : Mengurus maklumat hubungi seperti ubahsuai, padam, paparkan
 Contact Sequence : Susun atur alamat hubungi
5.0 Memasukkan Video YouTube
o Dapatkan video Youtube yang anda mahu: http://www.youtube.com
o Tekan pada butang Embed
o Anda akan menemui kod embed HTML. Copy & Paste ke dalam web anda.
o Anda boleh menukar panjang dan lebar video sebelum Copy & Paste
19 | P a g e

20. Panduan CMS
Gambarajah 4.6 : Kod HTML Youtube
o Masukkan kod HTML video youtube ke dalam web mengikut posisi/bahagian yang anda
rasakan sesuai
o Pastikan anda tekan butang Save.
o Selepas Save cuba lihat laman dengan menekan butang Preview
Gambarajah 4.7 : Memasukkan kod HTML
Sekiranya anda Preview dan tiada video yang keluar serta kod HTML masih kelihatan, sila ke menu Manage. Cari Web Page
tadi dan tekan edit. Kemudian tekan Save sekali lagi. Kod HTML masih kelihatan kerana mungkin ssitem CMS belum dapat
berinteraksi dengan kod HTML tadi
20 | P a g e

21. Panduan CMS
6.0 Memasukkan gambar melalui akaun Flickr.com
Ada 2 cara:
6.1 Copy & Paste
o Masuk ke akaun flickr.com anda
o Pilih gambar yang di ingini.
o Klik pada butang Share This
o Salin kod HTML seperti di bawah
o Pilih saiz gambar
o Paste kod HTML tadi ke dalam Page Content web anda
o Pastikan anda Save
Gambarajah 5.0 : Masukkan kod HTML Flickr
Sekiranya anda Preview dan tiada gambar yang keluar serta kod HTML masih kelihatan, sila ke menu Manage. Cari Web Page
tadi dan tekan edit. Kemudian tekan Save sekali lagi. Kod HTML masih kelihatan kerana mungkin ssitem CMS belum dapat
berinteraksi dengan kod HTML tadi
21 | P a g e

22. Panduan CMS
Nota:
<a href="http://www.flickr.com/photos/35567718@N08/5061086749/"
title="adidas_mat_ind_02 by kalam.corp, on Flickr"><img
src="http://farm5.static.flickr.com/4133/5061086749_18ce291d4c.jpg" width="490"
height="382" alt="adidas_mat_ind_02" /></a>
Link pertama : Link ini boleh di gantikan dengan link lain mengikut kehendak anda
Link kedua : Link gambar di akaun flickr
6.2 Insert Image
o Klik pada Page Content dimana gambar hendak di masukkan
o Klik pada butang Insert Image
o Masukkan Link gambar di flickr (selepas dari <img src=” )
o Isikan ruangan seperti Title, Alignment, Width, Height
o Klik butang InsertPastikan anda Save kerja anda
Gambarajah 5.1 : Butang Insert Image
7.0 Slideshare
o Login ke akaun http://www.slideshare.net anda
o Pilih dokumen yang ingin di letak dalam web anda
o Tekan butang Embed dan Copy kod embed HTML
22 | P a g e

23. Panduan CMS
Gambarajah 5.2 : Slideshare
o Paste kod embed Slideshare ke dalam Page Content anda
o Pastikan anda Save kerja-kerja anda
Gambarajah 5.3 : Memasukakn kod Slideshare
Sekiranya anda Preview dan tiada video yang keluar serta kod HTML masih kelihatan, sila ke menu Manage. Cari Web Page
tadi dan tekan edit. Kemudian tekan Save sekali lagi. Kod HTML masih kelihatan kerana mungkin ssitem CMS belum dapat
berinteraksi dengan kod HTML tadi
23 | P a g e

24. Panduan CMS
8.0 Image Editor
Anda boleh mengguna sebarang aplikasi penyunting gambar di dalam computer ataupun
secara online di internet.
Aplikasi di dalam computer : Microsoft Office Picture Manager
Cara: All Programs >> Microsoft Office >> Microsoft Office Tools >> Microsoft Office Picture
Manager
Aplikasi online: http://www.picnik.com , http://www.pixlr.com , http://www.aviary.com
dan banyak lagi
8.1 Picnik.com
o Layari http://www.picnik.com
o Tekan butang Upload kemudian pilih gambar yang berada dalam simpanan di
computer anda
Gamabarajah 5.4 : Gambar berjaya di muat naik
o Kemudian anda boleh membuat beberapa suntingan ke atas gambar tadi
 Rotate : Memutar gambar ke bawah dan atas
 Crop : Memotong bahagian gambar yang tidak perlu
 Resize : Membesar dan mengecilkan saiz gambar
8.1.1 Mengecilkan gambar
o Klik pada menu Resize
o Masukkan nilai panjang dan lebar yang anda mahu
o Setelah berpuas hati, klik butang OK
24 | P a g e

25. Panduan CMS
Gambarajah 5.5 : Resize
o Setelah anda berpuas hati dan tiada suntingan lain, klik butang Save & Share
o Isikan nama fail gambar anda dan tunggu proses Compressing selesai
o Kemudian tekan butang Save Photo dan simpan dalam computer anda
Gambarajah 5.6 : Save Photo
25 | P a g e

26. Panduan CMS
9.0 Facebook Badge di sidebar
o Sila ke http://www.facebook.com/badges atau
o Login ke Facebook dan klik Profile anda
o Tekan Create Profile Badge
Gambarajah 5.7 : Profile Facebook
o Klik Page Badges dan Klik other dan copy kod yang keluar
o Klik edit this badges untuk membuat suntingan pada badges anda
Gambarajah 5.8 : Badge Facebook
o Dalam CMS anda, klik Add Page dan pilih Web Page
o Masukkan Menu Title dan Page Title
o Tandakan YES pada Enable Sidebar
o Tandakan NO pada Bookmark & Share, Facebook Comment, dan Published
Note: Mengapa NO pada Published?
Page Content ini hanya akan terpapar pada Sidebar sahaja dan tidak akan dikalsifikasikan sebagai full page content
26 | P a g e

27. Panduan CMS
o Paste kod Badge Facebook dalam ruang Page Content
o Jangan lupa untuk Save kerja anda
o Anda boleh cuba letakkan widget lain seperti Like Box dan Shout Box
Gambarajah 5.9 : Memasukkan kod badge
Sekiranya anda Preview dan tiada video yang keluar serta kod HTML masih kelihatan, sila ke menu Manage. Cari Web Page
tadi dan tekan edit. Kemudian tekan Save sekali lagi. Kod HTML masih kelihatan kerana mungkin ssitem CMS belum dapat
berinteraksi dengan kod HTML tadi
27 | P a g e