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
