Layar Message dengan Tab Compose

Transkripsi

1 273 Gambar 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.

2 274 Gambar 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.

3 275 Gambar 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

4 276 disediakan field name dan em ail sebagai identifikasi apabila ingin menuliskan komentar terhadap post ini. Gambar 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

5 277 dapat menggunakan rich text editor yang menerima code html sebagai editor untuk post nya. Gambar 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.

6 278 Gambar 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.

7 279 Gambar 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.

8 280 Gambar 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.

9 281 Gambar 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.

10 282 Gambar 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.

11 283 Gambar 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.

12 284 Gambar 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.

13 285 Gambar 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.

14 286 Gambar 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.

15 287 Gambar 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.

16 288 Gambar 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.

17 289 Gambar 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.

18 290 Gambar 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.

19 291 Gambar 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.

20 Gambar Perancangan layar ranking and event dengan tab ranking 292

21 293 Gambar 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.

22 294 Gambar 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.

23 295 Gambar 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.

24 296 Gambar 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.

25 Gambar Perancangan layar admin dengan tab widget approval 297