273 Gambar 3.211 Perancangan layar message dengan tab inbox / sent ii. Layar Message dengan Tab Compose Pada tab ini user dapat membuat sebuah message baru untuk dikirimkan kepada user lainnya. User dapat mengunakan rich text editor yang menerima code html sebagai editor untuk messagenya.
274 Gambar 3.212 Perancangan layar message dengan tab compose f. Perancangan Layar Blog Halaman ini berisi sebuah blog yang dimiliki oleh masing-masing user. Halaman ini dapat diakses dengan memilih link blog pada panel kiri untuk blog milik user sendiri dan link pada tab blog di profile user lain untuk melihat blog milik user tersebut. i. Layar Blog dengan Tab Post Pada tab ini user dapat melihat post dari blog bersangkutan, user juga dapat memberikan rating dari tiap post dengan memilih bintang pada bagian akhir dari post tersebut. User pemilik blog dapat melakukan edit at au delete post melalui link delete dan edit di bawah judul tiap post.
275 Gambar 3.213 Perancangan layar blog dengan tab post ii. Layar Post Detail Pada tab ini user dapat melihat keseluruhan dari post tertentu beserta dengan komentar-komentar yang ada serta user juga dapat memberikan komentar terhadap post tersebut. Bagi pembaca blog yang bukan merupakan anggota dari Bee-Friend
276 disediakan field name dan em ail sebagai identifikasi apabila ingin menuliskan komentar terhadap post ini. Gambar 3.214 Perancangan layar blog detail iii. Layar Blog dengan Tab Compose Tab ini hanya muncul kepada user pemilik blog yang bersangkutan. Pada tab ini user dapat membuat sebuah post baru untuk dipublish dalam blog nya. User
277 dapat menggunakan rich text editor yang menerima code html sebagai editor untuk post nya. Gambar 3.215 Perancangan layar blog dengan tab compose iv. Layar Blog dengan Tab Theme Tab ini hanya muncul apabila user melihat blog nya sendiri, bukan blog milik user lainnya. Pada tab ini user memilih them e yang user ingin gunakan, user juga dapat mengkombinasikan elemen-elemen dari tampilan blog melalui form yang telah disediakan dan user juga dapat memasukan code css sendiri untuk tampilan blog nya.
278 Gambar 3.216 Perancangan layar blog dengan tab theme v. Layar Blog dengan Tab Search User dapat melakukan pencarian cepat terhadap blog post dengan memasukan kata kunci dari judul post yang ingin dicari.
279 Gambar 3.217 Perancangan layar blog dengan tab search g. Perancangan Layar Friends Halaman ini dapat diakses dengan memilih link friend dari panel kiri untuk user sendiri dan untuk melihat friend list dari user lain dapat diakses dengan memilih tab friends pada profile user tersebut. i. Layar Friends dengan Tab Friend List Pada tab ini user dapat melihat daftar friend yang dimiliki. User juga dapat menghapus friends dengan memilih link delete di tiap friends. User juga dapat membuat kategori baru dan memasukan friendnya ke dalam kategori tersebut dengan men drag-and-drop friend tersebut ke kotak kategori.
280 Gambar 3.218 Perancangan layar friends dengan tab friendlist ii. Layar Friends dengan Tab Pending Request Pada tab ini user dapat melihat daftar calon friend yang telah user kirimkan permintaan untuk menjadi friend dan masih belum dibalas oleh user yang bersangkutan. User dapat membatalkan permintaan tersebut dengan menekan cancel.
281 Gambar 3.219 Perancangan layar friends dengan tab pending request iii. Layar Friends dengan Tab Pending Approval Pada tab ini user dapat melihat daftar calon friend yang telah mengirimkan permintaan untuk menjadi friend dan masih belum dibalas oleh user sendiri. User dapat menyetujui atau menolak permintaan tersebut dengan mencentang checkbox di samping kiri friend dan menekan tombol accept atau reject. Tab ini juga dapat diakses dari notifikasi di halaman home.
282 Gambar 3.220 Perancangan layar friends dengan tab pending approval iv. Layar Friends dengan Tab Ignore List Pada tab ini user dapat melihat daftar dari user yang diabaikan oleh user. Di sini user juga dapat menghilangkan status ignored tersebut dengan menekan tombol delete ignore.
283 Gambar 3.221 Perancangan layar friends dengan tab ignore list v. Layar Friends dengan Tab User Search Pada tab ini user dapat melakukan pencarian cepat terhadap user lain dengan memasukan kata kunci berupa nama dari user yang ingin dicari.
284 Gambar 3.222 Perancangan layar friends dengan tab user search h. Perancangan Layar Market Halaman ini dapat diakses dari panel kiri yang terdapat di semua halaman. i. Layar Market dengan Tab Avatar/Widget Di halaman ini user dapat melihat avatar item dan widget yang ditampilkan dalam tab-tab sesuai dengan kategori dan tipenya. User dapat membeli barang yang user inginkan dengan menekan tombol buy pada barang tersebut atau dengan mendrag barang tersebut ke drop box yang juga berfungsi sebagai shopping list.
285 Gambar 3.223 Perancangan layar market ii. Layar Market dengan Tab Honey Transfer Di halaman ini user dapat melakukan transfer honey kepada user lainnya sesuai dengan credit rate yang berlaku. Untuk melakukan transfer user dapat memasukan data-data yang diminta di formulir transfer.
286 Gambar 3.224 Perancangan layar market tab honey transfer i. Perancangan Layar Forum Halaman forum dapat diakses sesuai dengan subject pada panel kiri. Halaman ini menampilkan diskusi yang terjadi antar user mengenai subject dan topik tertentu. Subject disini adalah mata kuliah yang diambil oleh user dalam perkuliahannya. i. Layar Main Forum Pada halaman ini user dapat melihat daftar dari topik yang sudah ada dan user juga dapat membuat topik baru dengan mengisi input field di bagian bawah halaman. Topik yang ada ditampilkan sesuai dengan reply terbaru dari semua topik. Apabila sebuah topik belum pernah dikunjugi oleh user, maka judul dari topik tersebut akan di bold.
287 Gambar 3.225 Perancangan layar main forum ii. Layar Forum Topic Pada halaman ini user dapat melihat daftar dari reply dari sebuah topik yang sudah ada dan user juga dapat membuat reply baru dengan mengisi input field di bagian bawah halaman. Reply yang ada ditampilkan sesuai dengan reply terbaru dari semua topik.
288 Gambar 3.226 Perancangan layar forum topic j. Perancangan Layar Development Halaman development dapat diakses melalui panel kiri. Halaman ini menampilkan cara-cara dan formulir bagi user untuk membuat avatar item maupun widget kreasi mereka sendiri. i. Layar Development dengan Tab Notes Pada halaman ini user dapat melihat cara-cara dan aturan-aturan yang berlaku untuk pembuatan avatar item dan widget kreasi user. Di tab ini juga terdapat FAQ (Frequently Asking Question) dari tahap development ini.
289 Gambar 3.227 Perancangan layar development dengan tab notes ii. Layar Development dengan Tab Avatar Development Pada halaman ini user dapat mengupload avatar item hasil kreasinya dengan memasukan data-data yang diperlukan serta memasukan file gambar dari avatar item kreasi user tersebut.
290 Gambar 3.228 Perancangan layar development dengan tab avatar development iii. Layar Development dengan Tab Widget Development Pada halaman ini user dapat mengupload script dari widget hasil kreasinya dengan memasukan data-data yang diperlukan serta memasukan script dari widget kreasi user tersebut.
291 Gambar 3.229 Perancangan layar development dengan tab widget development k. Perancangan Layar Ranking and Event Halaman ranking and event dapat diakses melalui panel kiri. Halaman ini menampilkan peringkat dari keseluruhan user yang terbagi menjadi beberapa kategori seperti user paling kaya, user paling aktif di forum, grup terpopuler dan sebagainya di tab ranking dan di tab event, ditampilkan keterangan dari event-event yang sedang berlangsung dalam aplikasi ini.
Gambar 3.230 Perancangan layar ranking and event dengan tab ranking 292
293 Gambar 3.231 Perancangan layar ranking and event dengan tab event l. Perancangan Layar Chat Halaman chat dapat diakses melalui panel kiri. Halaman ini menampilkan layar chatting dan dapat dimasuki oleh semua user yang sedang online. User dapat menuliskan pesan dan melihat pesan yang dituliskan oleh user lain secara langsung atau real time.
294 Gambar 3.232 Perancangan layar chat m. Perancangan Layar Admin Halaman admin dapat diakses melalui login admin. Halaman ini menampilkan semua kegiatan yang dapat dilakukan oleh seorang admin. i. Layar Admin dengan Tab Event Pada halaman ini admin dapat membuat event baru dengan memasukan datadata yang ada pada formulir pembuatan event, di tab ini admin juga dapat menentukan pemenang event yang telah dibuat sebelumnya.
295 Gambar 3.233 Perancangan layar admin dengan tab event ii. Layar Admin dengan Tab Avatar Approval Pada halaman ini admin dapat melihat serta mencoba avatar-avatar item yang telah dibuat oleh user. Apabila semuanya sesuai dengan ketentuan maka admin dapat memilih approve untuk menyetujui avatar item tersebut, namu apabila ada pelanggaran maka admin dapat menolak avatar item tersebut dengan memilih reject.
296 Gambar 3.234 Perancangan layar admin dengan tab avatar approval iii. Layar Admin dengan Tab Widget Approval Pada halaman ini admin dapat melihat serta mendownload widget yang telah dibuat oleh user. Apabila semuanya sesuai dengan ketentuan maka admin dapat memilih approve untuk menyetujui widget tersebut, namu apabila ada pelanggaran maka admin dapat menolak widget tersebut dengan memilih reject.
Gambar 3.235 Perancangan layar admin dengan tab widget approval 297