total web lite
TRANSCRIPT
Panduan CMS
1 | P a g e
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
Panduan CMS
2 | P a g e
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
Panduan CMS
3 | P a g e
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
Panduan CMS
4 | P a g e
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
Panduan CMS
5 | P a g e
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
Panduan CMS
6 | P a g e
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
Panduan CMS
7 | P a g e
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
Panduan CMS
8 | P a g e
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
Panduan CMS
9 | P a g e
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
Panduan CMS
10 | P a g e
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
Panduan CMS
11 | P a g e
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
Panduan CMS
12 | P a g e
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
Panduan CMS
13 | P a g e
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
Panduan CMS
14 | P a g e
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
Panduan CMS
15 | P a g e
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
Panduan CMS
16 | P a g e
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
Panduan CMS
17 | P a g e
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
Panduan CMS
18 | P a g e
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.
Panduan CMS
19 | P a g e
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
Panduan CMS
20 | P a g e
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
Panduan CMS
21 | P a g e
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
Panduan CMS
22 | P a g e
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
Panduan CMS
23 | P a g e
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
Panduan CMS
24 | P a g e
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
Panduan CMS
25 | P a g e
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
Panduan CMS
26 | P a g e
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
Panduan CMS
27 | P a g e
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