Tutorial penggunaan CMS / Application

Tutorial penggunaan CMS / Application
By. Steph/IT/04/2010
Bab I Pengenalan dasar
Website Ditek Jaya terdaftar dengan menggunakan nama domain http://www. ditekjaya.co.id
Website Ditek Jaya dilengkapi dengan database system yang memungkinkan administrator
dapat mengubah, menambah atau mengurangi isi website.
Untuk mengubah isi halaman web, admin harus terlebih dahulu masuk ke dalam halaman
admin database.
Login ke menu CMS menggunakan Mozilla Firefox / Internet Explorer
Ketik : www.ditekjaya.co.id/admin akan muncul menu untuk Login
Masukan User & Password
User : application
Password : application484
Tampilan halaman utama CMS untuk Application adalah sebagai berikut
Halaman ini dibagi menjadi 5 area, yaitu area Static, CMS, User Administration, Change Password dan Logout :
1. Static
Menu yang berisi halaman-halaman static, halaman yang tidak banyak mengalami perubahan, terdiri
dari :
1. About Us, : berisi content dari halaman About Us
2. Head Office Contact,: berisi content dari halaman Contact Head Office
3. Rep. Ofiice Contact : berisi content dari halaman Contact Rep Office
4. Welcome text : : berisi content Welcome text yang ada di halaman Home
2. CMS
Menu ini merupakan menu untuk melakukan perubahan, penghapusan dan penambahan untuk halaman
website yang dibuat dengan database.
Menu CMS ini terdiri dari 9 submenu sesuai dengan halaman website yang bisa dimodifikasi, yaitu:
1. Banner Management : untuk mengatur banner yang ada di sebelah kanan
2. Career : untuk mengatur halaman karir
3. Header Management : untuk mengatur header
4. News and Events : untuk mengatur halaman news and events
5. Product : untuk mengatur halaman detail product
6. Product Category : untuk menambah / mengurangi category product
7. Product Sub Category : untuk mengatur halaman sub category
8. Support Center : untuk mengatur halaman support center
9. Visitor Contact : untuk melihat isian form contact us
3. User Administration : untuk mengatur user > Khusus untuk yang berkepentingan
4. Change Password : untuk mengubah password
5. Logout : keluar dari halaman admin
Berikut langkah-langkah untuk menambah, mengubah dan mengupdate Website Area Application
Halaman menu Static
Gambar
admin
disamping
untuk
ini
adalah
mengatur
halaman
halaman
static
( about us, head office content. Rep. office
content dan welcome text).
Halaman editor dapat diisi layaknya seperti
menggunakan Microsoft office. Panel editor
yang pertama diisi dengan content bahasa
inggris. Dan panel editor yang kedua diisi
dengan content berbahasa Indonesia.
Setelah itu dapat memilih “Approve” – “Yes”,
lalu kemudian klik “Submit”.
BAB II ( Fungsi lanjutan )
2. 1. CMS
Seperti yang telah dibahas pada bab I (Pengenalan Dasar), menu ini digunakan untuk melakukan pengeditan
terhadap halaman website yang dibuat dengan database.
2.1.1 Button
Berikut ini adalah button – button yang dipakai di halaman CMS
Add Button : digunakan untuk menambah item
Edit Button : digunakan untuk mengedit item
Trash Button : digunakan untuk menghapus item
Search Button : digunakan untuk mencari item di
halaman CMS yang aktif.
2.1.2 Banner Management
Halaman pertama saat membuka halaman Banner Management akan menampilkan list data Banner
Management yang sudah diinput, dan letak posisinya.
Untuk mengatur ulang letak posisi banner, dapat diklik “Edit Position”.
Gambar 2.1 Halaman Utama Admin Banner Management
Gambar 2.2 Halaman Admin Add Banner Management
Field isian untuk halaman ini adalah:
Banner Name : Nama untuk banner sebagai pengenal
Banner Image : Gambar banner yang akan ditampilkan dalam format jpg.
Untuk tampilan maksimal, ukuran yang disarankan adalah
Max width 255 px.
Banner Link
: Link untuk banner tersebut apabila diklik
Banner Position : Urutan posisi banner
Approve
: ‘Yes’ untuk menampilkan banner tersebut pada website. ‘No’ bila tidak
ingin menampilkan banner pada website.
Berikut adalah contohnya :
Gambar 2.3 Halaman Admin Add Banner Management
2.1.3 Product
Klik menu CMS - Product
Halaman pertama saat membuka halaman Product akan menampilkan list data yang sudah diinput.
Gambar 2.4 Halaman Utama Admin Product
Sebelum menginput detail product, terlebih dahulu tentukan product category product yang akan diinput.
Untuk menambahkan Product Category dibuat melaluo menu CMS - Product Category
Gambar 2.5 Halaman Admin Pilih Product Category
Gambar 2.6 Halaman Admin Detail Product
Field isian untuk halaman ini adalah:
Product Sub Category : Pilhan Sub Category Product
Product Name
: Nama Product ( tidak boleh karakter "/",
Product Detail
: Informasi detail product
Image
: Image thumbnail product
Featured product
: Besar tampillan di halaman home
"(", atau ")" )
Featured product slot : Porsi ukuran thumbnail
Untuk memasukan Gambar
Klik Insert / Edit Image – Browse Server –Kalau belum ada di Directory Images on server klik Browse dan cari
dimana gambar disimpan di komputer kita – klik Open – Klik Upload- Cari gambar di Directory Image on server –
Klik Ok, muncul seperti berikut ini :
Gambar 2.8 Halaman Add product
Size dan letak gambar bisa diatur di sini
Klik Gambar – Klik Insert / Edit Image
Gambar 2.7 Halaman Insert / Edit Image
Untuk membuat table jika diperlukan Klik Insert / Edit Table > Gambar Table. Berikut contohnya
Gambar 2.9 Halaman Insert / Edit Table
Hasilnya adalah sebagai berikut :
Gambar 2.10 Halaman Add Product
2.1.4 Product Category
Halaman pertama saat membuka halaman akan menampilkan detail data Product Category
Gambar 2.11 Halaman Utama Product Category
Gambar 2.12 Halaman Admin Add Product Category
Field isian untuk halaman ini adalah:
Product Category Name : Nama kategori product
Image
: image icon kategori
2.1.5 Product Sub Category
Halaman pertama saat membuka halaman akan menampilkan detail data Sub Product Category.
Gambar 2.13 Halaman Utama Admin Product
Gambar 2.14 Halaman Admin Detail Product Sub Category
Field isian untuk halaman ini adalah:
Product Category
Name
: Pilihan kategori produk
: Nama Produk
Description
: Deskripsi detail sub category produk
2.1.5 News and Event
Klik Menu CMS – News & Event
Halaman pertama saat membuka halaman News and Event akan menampilkan list data yang sudah
diinput. Untuk memasukkan & Edit Image caranya sama dengan memasukkan & Edit Image di News &
Event di atas.
Gambar 2.15 Halaman Utama Admin News and Event
Gambar 2.16 Halaman Admin Add News and Event
Field isian untuk halaman ini adalah:
News Category
: Pilihan untuk memilih category news
News Title
: Judul News
Description
: Isi news
Untuk memasukkan gambar :
Klik Insert / Edit Images – Browse Server –Kalau belum ada di Directory Images on server klik Browse dan cari
dimana gambar disimpan di komputer kita – klik Open – Klik Upload- Cari gambar di Directory Images on server
– Klik Ok, muncul seperti berikut ini :
Gambar 2.17 Halaman Add News & Event
Setelah selesai klik Submit
Untuk mengedit gambar : klik gambar -lalu klik Insert Images / Edit image. Seperti berikut
Gambar 2.18 Halaman Insert / Edit Images
Hasil setelah di Upload adalah sebagai berikut :
Gambar 2.19 Halaman News & Event Application
2.1.6 Halaman Suport Center
Klik CMS – Suport Center
Halaman pertama saat membuka halaman News and Event akan menampilkan list data yang sudah
diinput.
Untuk menambahkan artikel, Klik tanda +
2.1.7 Visitor Contact
Berguna untuk data user yang mengirimkan email ke [email protected]
Klik menu CMS – Visitor Contact
Halaman pertama saat membuka halaman akan menampilkan detail data Visitor Contact
Gambar 2.20 Halaman Utama Admin Visitor Contact
Field isian untuk halaman ini adalah:
Icon Export CSV : Klik icon ini untuk export data ke CSV, akan ditanyakan kemana file ini
akan disimpan
Convert data CSV ke bentuk table :
1. Buka Microsoft Excel.
2. New Document
3. Buka menu Data -> Import External Data -> Import Data, cari dimana data Visitor
Contact disimpan
4. Akan keluar window setting, pilih Delimited, kemudian next
5. Centang semicolon, kemudia klik finish
6. Pilih existing worksheet, klik OK
2.1.8 Untuk Change Password
Klik CMS – Change Password
Masukkan Password lama anda – Ketikan Password baru – Ketikan Password baru sekali lagi- Klik
Submit
2.1.9 Untuk keluar Klik Logout