User Guide Web Fakultas Universitas Buddhi Dharma (Prodi) Versi Dokumen 2.0 Oktober 2016 Hal. 1/26
User Guide Web Universitas Buddhi Dharma Silakan kontak Tim BSTI di : Koordinator : Amessanggeng Pataropura, M.Kom. Riki, M.Kom Rino, M.Kom Aditiya Hermawan, M.Kom Yusuf Kurnia, M.Kom Suwitno, S.Kom. Rio Permana, S.Kom Lusia Desyana Yanti, S.Kom Dela Liman, S.Kom Westin Siahaan Niki Destiandi E-mail : bsti@ubd.ac.id Telepon : 021-5517853 Handphone : Riwayat Revisi Tanggal Versi Deskripsi Penulis Draft Draft Awal Rino, M.Kom Rio Permana, S.Kom 20 Juni 2014 1.0 Versi cetak Rino, M.Kom Rio Permana, S.Kom Oktober 2016 2.0 Versi cetak Rino, M.Kom Lusia Desyana Yanti, S.Kom Pelatihan ini diberikan oleh anggota Tim BSTI Universitas Buddhi Dharma. Dokumen ini diberikan untuk penunjang Pelatihan web fakultas bagi prodi. Semua produk dan nama perusahaan yang mungkin disebutkan di dokumen ini adalah merek dagang dari pemegangnya masing-masing. Hal. 2/26
Daftar Isi DAFTAR ISI... 3 1 PENDAHULUAN... 4 1.1 Tujuan... 4 1.2 Manfaat... 4 1.3 Definisi... 5 2 DESAIN SISTEM WEB FAKULTAS... 6 2.1 Lingkungan Kerja Web Fakultas... 6 2.1.1 Tampilan Awal Web... 6 2.1.2 Tampilan User Login dan Logout... 7 2.1.3 Dashboard... 8 2.1.4 Pages... 8 2.1.5 Edit Pages... 9 2.1.6 Add Pages...19 2.1.7 Pengaturan Menus...21 Hal. 3/26
1 Pendahuluan Bab ini berisi pengenalan website Fakultas Universitas Buddhi Dharma yang akan mengantarkan pembaca khususnya prodi ke pemahaman akan proyek web Fakultas Universitas Buddhi Dharma dan secara singkat akan membahas Desain Arsitektur rancangbangun web Fakultas Universitas Buddhi Dharma. 1.1 Tujuan Web Fakultas Universitas Buddhi Dharma adalah sebuah web fakultas (prodi) untuk memberikan informasi dan untuk meningkatkan dari segi pelayanan, khususnya bagi mahasiswa dan civitas akademika Universitas Buddhi Dharma. Tujuan dari dokumen ini adalah sebagai gambaran singkat mengenai konsep desain web Fakultas Universitas Buddhi Dharma. Konsep desain web fakultas (prodi) ini telah disempurnakan dari draft desain awalnya terutama setelah melalui implementasi web fakultas di universitas penggunanya. Karena dokumen ini merupakan gambaran singkat mengenai konsep dasar desain web fakultas, maka dokumen ini tidak membahas desain dengan sangat teknis. 1.2 Manfaat Berikut adalah manfaat dari web Fakultas Universitas Buddhi Dharma: 1. Dengan adanya web fakultas ini dapat menjadi jembatan antara fakultas dengan mahasiswanya, fakultas dengan pihak eksternal seperti masyarakat dan para calon mahasiswa. 2. Siklus informasi dan pelayanan dapat lebih meningkat seiring dengan perkembangan jaman di mana internet dan web dapat mengakomodir penyajian informasi sehingga lebih optimal. 3. Dengan adanya dokumen ini dapat membantu bagi fakultas dalam mengelola web ini. Hal. 4/26
1.3 Definisi Berikut ini adalah definisi utama dalam proyek SisFo Kampus: 1. Web Fakultas Universitas Buddhi Dharma adalah sebuah web fakultas untuk memberikan informasi dan untuk meningkatkan pelayanan, khususnya bagi mahasiswa dan civitas akademika Universitas Buddhi Dharma. 2. Web ini dapat diakses melalui link web masing-masing fakultas 3. Tim BSTI adalah sebuah departemen yang bertugas mengelola data, jaringan dan pelatihan dalam ruang lingkup kampus Universitas Buddhi Dharma. Hal. 5/26
2 Desain Sistem Web Fakultas Dalam bab ini akan dibahas mengenai desain sistem web FakultasUniversitas Buddhi Dharma. Pembahasan yang dilakukan tidak akan dalam, tetapi akan membahas rekayasanya secara umum. Ini dilakukan untuk mempercepat pemahaman pembaca dan pengguna web Fakultas Universitas Buddhi Dharma khususnya Prodi. 2.1 Lingkungan Kerja Web Fakultas 1. Tampilan Awal 2. User Login dan Logout 3. Tampilan Dashboard 4. Tampilan Pages 5. Tampilan Edit Pages 6. Tampilan Add Pages 7. Pengaturan Menus 2.1.1 Tampilan Awal Web Web ini dapat diakses dengan alamat web masing-masing fakultas. Dengan tampilan awal seperti pada gambar dibawah ini. User dibatasi hanya pada menu fact. Gambar 2.1.1 Tampilan Awal Hal. 6/26
2.1.2 Tampilan User Login dan Logout Untuk mengakses halaman ini, silahkan menuju link web admin masing-masing fakultas Setelah itu anda login dengan menggunakan user yang telah diberikan oleh BSTI divisi modul dan training. Gambar 2.1.2 Tampilan User Login dan Logout Hal. 7/26
2.1.3 Dashboard Setelah melakukan login pada menu login, maka user akan langsung di arahkan ke menu awal seperti gambar di bawah yang disebut dashboard. Di halaman ini anda dapat mengelola seluruh bagian web, tetapi otoritas nya disesuaikan dengan login user itu sendiri. Gambar 2.1.3 Tampilan Dashboard 2.1.4 Pages Tetap pada halaman yang sama, editor silahkan memilih menu Pages All Pages untuk mengakses dan mengedit pages yang akan ditampilkan pada halaman awal web fakultas seperti pada gambar di bawah ini. Hal. 8/26
Gambar 2.1.4 Tampilan Pages 2.1.5 Edit Pages Selanjutnya, editor akan masuk ke halaman dimana semua pages dapat dikelola. Gambar 2.1.5 Tampilan Layar Edit Pages Di bagian bawah terdapat tombol next dan previous untuk menuju ke halaman selanjutnya. Sebagai catatan, bagian ini akan muncul kalau jumlah page sudah lebih dari 15 pages. Hal. 9/26
Gambar 2.1.6 Tampilan Layar Edit Pages Hal. 10/26
2.1.5.1 Edit Page Kontak Pilih page kontak, lalu pilih edit Gambar 2.1.5.1.1 Tampilan Layar Edit Page Kontak Editor akan diarahkan ke halaman berikutnya, untuk merubah isi dari page tersebut. Gambar 2.1.5.1.2 Tampilan Layar Edit Page Kontak Setelah selesai merubah informasi, silahkan mengklik tombol update untuk menyimpan hasil yang telah diubah, seperti pada gambar berikut. Hal. 11/26
Gambar 2.1.5.1.3 Tampilan Layar Edit Page Kontak Bila sukses maka editor akan mendapat notifikasi seperti gambar di bawah. Gambar 2.1.5.1.4 Tampilan Layar Edit Page Kontak Hal. 12/26
2.1.5.2 Edit Pages Kurikulum Pilih page Kurikulum, kemudian pilih edit Gambar 2.1.5.2.1 Tampilan Layar Edit Pages Kurikulum Editor akan diarahkan ke halaman berikutnya, untuk merubah isi dari page tersebut. Gambar 2.1.5.2.2 Tampilan Layar Edit Page Kurikulum Setelah selesai merubah informasi, silahkan mengklik tombol update untuk menyimpan hasil yang telah diubah, seperti pada gambar berikut. Hal. 13/26
Gambar 2.1.5.2.3 Tampilan Layar Edit Page Kurikulum Bila sukses maka editor akan mendapat notifikasi seperti gambar di bawah. Gambar 2.1.5.2.4 Tampilan Layar Edit Page Kurikulum Hal. 14/26
2.1.5.3 Edit Page Profil Pilih page Profil, kemudian pilih edit Gambar 2.1.5.3.1 Tampilan Layar Edit Page Profil Editor akan diarahkan ke halaman berikutnya, untuk merubah isi dari page tersebut. Gambar 2.1.5.3.2 Tampilan Layar Edit Page Profil Setelah selesai merubah informasi, silahkan mengklik tombol update untuk menyimpan hasil yang telah diubah, seperti pada gambar berikut. Hal. 15/26
Gambar 2.1.5.3.3 Tampilan Layar Edit Page Profil Bila sukses maka editor akan mendapat notifikasi seperti gambar di bawah. Gambar 2.1.5.3.4 Tampilan Layar Edit Page Profil 2.1.5.4 Edit Page Struktural Organisasi Pilih page struktural organisasi, kemudian pilih edit Gambar 2.1.5.4.1 Tampilan Layar Edit Page Struktural Organisasi Hal. 16/26
Editor akan diarahkan ke halaman berikutnya, untuk merubah isi dari page tersebut. Gambar 2.1.5.4.2 Tampilan Layar Edit Page Struktural Organisasi Setelah selesai merubah informasi, silahkan mengklik tombol update untuk menyimpan hasil yang telah diubah, seperti pada gambar berikut. Gambar 2.1.5.4.3 Tampilan Layar Edit Page Struktural organisasi Bila sukses maka editor akan mendapat notifikasi seperti gambar di bawah. Hal. 17/26
Gambar 2.1.5.4.4 Tampilan Layar Edit Page Struktural Organisasi Hal. 18/26
2.1.6 Add Pages Jika editor menginginkan adanya halaman baru, maka editor perlu melakukan add pages, adanya seperti berikut Gambar 2.1.6.1 Tampilan Layar Untuk Add Pages Setelah editor klik add new pada menu pages, maka editor akan masuk ke halaman seperti add new page seperti berikut, Gambar 2.1.6.2 Tampilan Layar Halaman Add New Page Isikan kolom isian Enter title here dengan judul halaman yang ingin ditambahkan. Karena modul ini khusus untuk fakultas, maka setiap pembuatan page baru harus diawali dengan tulisan Admission, hal itu berguna untuk pengelompokan page sesuai dengan unit masingmasing dan agar memudahkan untuk pembuatan menu yang nanti akan dijelaskan. Hal. 19/26
Kalau kolom judul dan isian halaman baru sudah selesai, maka editor perlu mem-publish page tersebut agar bisa muncul pada web fakultas. Gambar 2.1.6.3 Tampilan Layar Publish New Page Kalau sudah di-publish maka editor akan mendapatkan notifikasi seperti berikut, Gambar 2.1.6.4 Tampilan Layar Page Published Hal. 20/26
2.1.7 Pengaturan Menus Setelah melakukan penambahan halaman untuk menu admission, maka yang perlu editor lakukan adalah melakukan pengaturan menu untuk menambahkan halaman tersebut di menu dropdown bagian admission. Caranya editor perlu masuk ke Appearance Menus, seperti berikut, Gambar 2.1.7.1 Tampilan Layar Appearance Menus Dan editor akan masuk ke tampilan menu yang ada di web fakultas, seperti berikut Gambar 2.1.7.2 Tampilan Layar Halaman Menus Hal. 21/26
Yang perlu diperhatikan editor adalah kolom yang bernama Pages, karena disanalah tempat halaman-halaman yang sudah dibuatkan. Dan karena editor sudah membuat halaman baru dan ingin menambahkannya ke dalam menu maka yang perlu dicentang adalah judul halaman baru tersebut, contohnya seperti berikut Gambar 2.1.7.3 Tampilan Layar Kolom Pages Centang halaman baru yang ingin dimasukan ke dalam menunya, lalu klik tombol add to menu, maka hasilnya seperti berikut Hal. 22/26 Gambar 2.1.7.4 Tampilan Layar Penambahan Page
Langkah selanjutnya adalah membuat halaman baru ini berada paling bawah dari menumenu ini, cara pertama adalah membuat menu halaman baru ini dengan cara klik tulisan page yang ada tanda panah ke bawah, ada di bagian paling kanan dari menu halaman baru ini. Kemudian pilih under, lengkapnya bisa lihat gambar berikut Gambar 2.1.7.5 Tampilan Layar Set Menu Jika sudah pilih under, maka otomatis menu halaman baru tersebut ada di bagian paling bawah dari menu-menu yang sudah ada, seperti berikut Gambar 2.1.7.6 Tampilan Layar Set Menu Karena halaman baru ini ingin dimasukan ke dalam menu Manajemen Informatika D3, maka langkah selanjutnya adalah menyeret menu halaman baru ini berada di bawah menu Hal. 23/26
Manajemen Informatika D3 atau dengan kata lain menjadikannya sub-menu dari Manajemen Informatika D3, dan letakan seperti berikut Gambar 2.1.7.7 Tampilan Layar Sub Menu Manajemen Informatika D3 Setelah halaman baru dijadikan sub-menu dari Manajemen Informatika D3, editor tinggal menyimpan posisi menu-menu ini dengan cara klik tombol Save Menu yang ada di sebelah kanan. Gambar 2.1.7.8 Tampilan Layar Save Menu Maka halaman baru yang sudah dibuat dan disesuaikan di dalam menu Manajemen Informatika D3 tadi akan muncul di halaman utama dari web fakultas, hasilnya seperti berikut Hal. 24/26
Gambar 2.1.7.8 Tampilan Layar Menu Baru Manajemen Informatika D3 Hal. 25/26
Penutup Dokumen ini tidaklah terlalu detail dalam penyajian secara teknis. Silakan merefer ke dokumen Desain Sistem dan Database Web Fakultas Universitas Buddhi Dharma untuk informasi desain lebih detail. Akhir kata kami dari Tim BSTI divisi Modul dan Training Universitas Buddhi Dharma mengucapkan terima kasih atas perhatian dan kerja sama yang telah diberikan dalam pelatihan ini. Atas nama Tim BSTI Divisi Modul dan Training. bsti.ubd.ac.id Hal. 26/26