Betadine Content Management System (CMS)

1. Pendahuluan

A. Apa itu Content Management System?

Content Management System (CMS) adalah sebuah software yang diaktifkan di browser dan memungkinkan user untuk membuat, mengelola, dan memodifikasikan website ataupun aplikasi beserta kontennya tanpa harus menguasai bahasa pemrograman terlebih dulu. Sistem manajemen konten ini menyediakan antarmuka pengguna grafis agar Anda dapat mengelola setiap aspek website dan aplikasi. Anda bisa membuat dan mengedit konten, menambahkan gambar dan video, dan setup keseluruhan desain atau tampilan situs.

B. Browser Requirements

CMS Moms ID dapat diakses melalui berbagai browser diantaranya:

• Chrome
• Firefox
• Internet Explorer

C. Editing Design Templates

Aplikasi CMS tidak memungkinkan Admin CMS untuk dapat merubah desain template aplikasi dan website Heltiyu, apabila ingin dilakukan perubahan template harap berdiskusi terlebih dahulu dengan PM dan creative terkait.

2. Penggunaan Sistem

A. Login ke dalam CMS

1. Buka: https://betadine.co.id/backoffice pada browser
2. Di dalam halaman login, masukkan email dan password sesuai akun yang sudah ditentukan sebelumnya, serta masukkan captcha sesuai yang tertera di halaman login.

B. Tampilan CMS Home Dashboard

Setelah sukses login akan masuk ke tampilan home, dan dashboard CMS:

Menu yang terdapat pada CMS Betadine bertujuan untuk mengelola konten pada website. Di dalam menu tersebut terdapat beberapa fitur yang dapat dikelola oleh admin, diantaranya:

• Product (Category/Product)
• Homeslider
• Page
• Navbar
• Member

C. Product – Category

1. Home, tampilan list kategori produk yang ada di website. Berfungsi untuk mengkategorikan produk-produk dalam 1 main product page.

Untuk mengelola menu ini admin dapat melakukan add data (untuk menambahkan kategori baru), edit (untuk menyunting kategori yang ada) dan memuncul kan atau menghilangkan kategori dengan klik button publish/unpublish. Tampilan pengisian kategori dapat di lihat dibawah ini;

1.2. Add data

Isi judul halaman kategori – pilih jumlah grid pada halaman (sesuai kebutuhan) – input kode warna kategori (dianjurkan yang sesuai dengan kode warna dari produk tsb) – masukkan template yang di inginkan (kolom ini berguna untuk memunculkan bagian-bagian pada tampilan halaman, contoh: banner, produk, produk terkait, artikel dll) – custom html bersifat opsional, jika brief yang di inginkan klien akan tampilan pada halaman tidak mampu dibuat melalui CMS maka admin dapat meminta kepada tim frontend untuk membuat sebuah script html yang sesuai dengan keinginan klien lalu di copy paste pada kolom tersebut (ini berlaku jika template page di isi dengan custom html ) – isi semua meta untuk kebutuhan SEO pada website – setelahnya klik validate and save as.

1.3. Edit, berfungsi untuk mengubah informasi testimoni yang ada.

D. Product

1. Home, Menampilkan list produk pada website.

Untuk mengelola menu ini admin dapat melakukan:

• Add data, untuk menambahkan data produk baru
• Edit, untuk menyunting produk yang ada
• Where to buy, untuk menambahkan ecommerce yang menjual produk serupa
• Certificate, untuk membuat thumbnail info terkait produk
• Direction, untuk menambahkan proses cara penggunaan produk
• Faq, untuk menambahkan pertanyaan yang peling sering ditanyakan terhadap produk
• Story, untuk menambahkan artikel terkait produk
• Video, untuk menambahkan video terkait produk
• Publish/unpublish, berfungsi untuk memuncul kan atau menyembunyikan produk.

Tampilan pengisian produk dapat di lihat dibawah ini;

1.2. Add data, untuk menambahkan data produk baru.

Isi category product terlebih dahulu – input judul pada kolom title – input ordered untuk menentukan urutan produk – input script html pada kolom custom html attribute untuk mendukung tampilan yang tidak dapat dilakukan pada cms (opsional) – input description untuk menjelaskan manfaat produk – input terms and conditions atas sumber produk tersebut – input script html pada kolom custom html additional untuk mendukung tampilan yang tidak dapat dilakukan pada cms (opsional) – kolom ingredients left and right column berfungsi untuk menyesuaikan tampilan konten pada sisi kiri dan kanan di satu section – input cover dan icon sesuai dengan size yang tertera – input related product jika pada satu kategori terdapat lebih dari 1 produk – isi meta untuk mendukung SEO produk – input exernal url untuk mengantarkan user ke halaman lain (opsional) – input sub category/filtering group name dengan judul kategori lain yang sesuai (opsional) tergantung tampilan yang di inginkan sesuai dengan brief – klik validate and save as jika sudah sesuai.

1.3. Edit, berfungsi untuk mengubah informasi data yang sudah ada.

1.4. Where to buy, untuk menambahkan E-commerce yang menjual produk serupa.

1.5. Certificate, untuk membuat thumbnail info terkait produk.

Contoh certificate pada website:

1.6. Direction, untuk menambahkan proses cara penggunaan produk.

Contoh direction pada website:

1.7. FAQ, untuk menambahkan pertanyaan dan jawaban yang peling sering muncul terhadap produk.

Contoh FAQ pada website:

1.8. Story, untuk menambahkan artikel terkait produk.

1.9. Video, untuk menambahkan artikel terkait produk.

E. Homeslider

1. Home,  menampilkan list hero banner pada halaman utama website dan halaman detail.

1.2 Add data

Banner berasal dari client, pada banner telah terdapat konten yang tidak perlu di input secara manual lagi seperti quote dan description.

• Home page banner: Maka yang perlu dilakukan untuk upload home banner adalah input title > ordered > url / link (detail page / diluar betadine) > color code > show in homepage diubah ke YES > show as image only diubah ke YES > upload cover dan save and validate.

• Detail page banner: Langkah yang dilakukan sama dengan penerapan homepage banner namun perlu menambahkan category product dan mengubah pilihan show in homepage menjadi NO.

1.3 Edit

Contoh capture diatas adalah contoh pengisian pada detail page banner.

F. Page

1. Home, menampilkan list halaman yang dibuat manual melalui CMS, fungsi fitur ini untuk membuat halaman pendukung akan website seperti About us, privacy policy, dll.

1.2 Add data

1.3 Edit

G. Navbar

1. Home, menampilkan list navbar yang ada. Navbar adalah singkatan dari navigation bar Komponen navbar biasanya digunakan untuk membuat menu navigasi yang terletak pada bagian header website. bisa kita sebut sebagai menu utama dari sebuah website. karena terletak di bagian header yang paling atas.

1.2 Add data

Ada dua tahapan pada navbar di website ini. Pertama, admin diminta untuk membuat parent menu terlebih dahulu baru setelah itu membuat menu-menu dibawahnya yang berfungsi sebagai identifikasi halaman-halaman yang dituju biasa disebut child menu, langkah-langkan penginputan keduanya sbb;

Parent menu: title > url / link detail page > color code > ordered > location (header) > column location (1) > save and validate

Child menu: title > input parent menu > url / link detail page > color code > ordered > location (header) > column location (1) > save and validate

Pada bagian topbar, footer dan bottombar juga dapat di lakukan di fitur ini dengan mengikuti instruksi diatas.

1.3 Edit

H. Member

1. Menampilkan list admin dan cara menambahkan member (Admin) CMS.

1.2 Add data

1. Form add member (admin) CMS. Admin mengisi data:
2. Nama member (fullname)
3. Phone number
4. Level access member: Administrator (dapat mengakses semua fitur CMS) dan User (Tidak dapat mengakses beberapa fitur CMS)
5. Status: Active dan Banned
6. Enable CMS Access: ya atau tidak
7. Photo profile member
8. Email dan password

1.3 Edit