BAB III ANALISA DAN PERANCANGAN APLIKASI

BAB III ANALISA DAN PERANCANGAN APLIKASI 3.1 Analisa Permasalahan Ananlisa dapat di definisikan sebagai penguraian dari suatu sistem informasi yang utuh ke dalam bagian-bagian atau komponenya dengan maksud untuk mengidentifikasi dan mengevaluasi permasalahan-permasalahan, kesempatankesempatan, hambatan-hambatan yang terjadi dan kebutuhan-kebutuhan yang dihadapkan sehingga dapat diusulkan parbaikan-perbaikannya. 3.2 Identifikasi Masalah Unit kegiatan Komunitas Fotografi Jalanan (KFJ) mempunyai masalah dalam penyebaran informasi seputar KFJ kepada anggota-anggotanya maupun kepada pihak luar, baik itu informasi mengenai KFJ, forum diskusi foto, berbagi tips dan trik fotografi dan kegiatan yang diadakan maupun acara apa saja yang akan diadakan oleh KFJ. Maka dari itu, penulis membuat situs web resmi yang di gunakan sebagai sarana untuk menginformasikan tips dan trik fotografi dan karyakarya hasil foto anggotanya ke dunia luar. 3.3 Identifikasi kebutuhan Berdasarkan identifikasi permasalahan, dapat disimpulkan bahwa diperlukan suatu sistem yang mampu memberikan informasi tentang Komunitas Fotografi Jalanan (KFJ), pada era modern sebuah informasi akan mudah didapatkan melalui media elektronik yang berbasis web dan mudah diakses. Maka dari itu, unit kegiatan Komunitas Fotografi Jalanan (KFJ) berkeinginan membuat situs web resmi yang di gunakan sebagai sarana untuk menginformasikan kegiatan komunitas Fotografi Jalanan dan karya-karya hasil foto anggotanya ke dunia luar. 23

24 3.4 Perancangan sistem Rancangan sistem secara umum dilakukan dengan maksud untuk memberikan gambaran umum kepada user tentang sistem yang diusulkan. Rancangan ini mengidentifikasikan kompone-komponen sistem informasi yang dirancang secara rinci. 3.4.1 Gambaran Sistem Secara umum cara kerja sistem Komunitas Fotografi Jalanan (Kfj fotografi), dapat dilihat pada gambar berikut : Gambar 3.1 Gambaran sistem Kfj fotografi Menurut gambar 3.1 dapat dilihat bahwa sistem kfj fotografi ini digunakan melalui media internet, dimana tiap-tiap tingkatan user mengakses kfj fotografi secara online.

25 3.4.2 Rancangan Use Case Diagram Gambar 3.2 Use Case Diagram Dalam use case diagram di atas, terdapat 3 (tiga) aktor yang menggunakan sistem, yaitu admin, member dan user umum. Admin dapat melakukan login, logout, sign up member, edit account, ganti password, tambah atau hapus berita, tabah link atau hapus link, update profile, tambah atau hapus data video, hapus data gallery, Tambah data gallery, Tambah topik forum, hapus topik forum, isi forum, Hapus member. Kemudian untuk member dapat melakukan login, logout, edit account, ganti password, tambah data gallery, isi forum. Sedangkan user umum dapat melakukan view gallery, view video tips dan trik fotografi, sign up member. Penjelasan dari Gambar 3.2 use case scenario di atas, akan dijelaskan pada tabel di bawah ini:

26 Tabel 3.1 Use Case Scenario View Gallery Use case name Actor Brief Basic flow User View Gallery User guest, member, Admin User guest mengunjungi website Kfj fotografi. a. User masuk ke dalam website Kfj fotogrfi. b. Sistem menampilkan menu interface website. c. Sistem menampilkan menu utama. Pre Post Komputer dalam keadaan siap atau hidup. Tampil menu utama. Uase case scenario View Gallery adalah usecase yang berisi kategori foto dapat dikunjungi oleh user guest, member, dan admin. User guest hanya dapat mengunjungi dan melihat gallery saja, melihat tips dan trik fotografi, melakukan sign up member website kfj fotografi, tanpa bisa melakukan tambah data kategori foto. Sedangkan user member bisa melakukan tambah data pada menu gallery. User admin bisa menghapus data gallery dan menambah data gallery. Tabel 3.2 Use Case Scenario View Video Tips dan Trik Fotografi Use case name Actor Brief Basic flow Video Tips dan Trik Fotografi User guest, user member, admin User ingin melihat video tips dan trik website Kfj fotografi. a. User sudah masuk ke dalam website. b. Sistem menampilkan menu pada halaman user. c. User memilih menu tips dan trik. Pre User berhasil bisa masuk ke menu tips dn trik.

27 Uase case scenario View video tips dan trik fotografi adalah usecase yang berisi video tips dan trik fotografi yang dapat dikunjungi oleh user guest, member, dan admin. User guest dan user member hanya dapat mengunjungi dan melihat video tips dan trik fotografi saja, website kfj fotografi, tanpa bisa melakukan tambah data. Sedangkan user admin bisa menghapus data video tips dan trik fotografi dan menambah data video tips dan trik fotografi. Tabel 3.3 Use Case Scenario Sign Up Member Use case name Actor Brief Basic flow Sign up member User umum User umum ingin menjadi member. a. User sudah masuk ke dalam website. b. Sistem menampilkan menu daftar. c. User mengisi data. Alternative flow Jika data yang diisi tidak lengkap maka sistem memberikan pesan kesalahan dan meminta untuk melengkapinya. Pre - Post User umum berhasil menjdi member Pada use case scenario sign up member hanya untuk user guest yang ingin menjadi member, dengan cara mengisi data yang disediakan di tabel daftar member. Tabel 3.4 Use Case Scenario Edit account Use case name Actor Brief Basic flow Edit account User member, admin User ingin mengubah data diri. a. User sudah masuk ke dalam website. b. Sistem menampilkan menu pada halaman User. c. User memilih menu seting akun d. User mengubah Biodatanya.

28 Pre Post Menu Biodata dan Menu User sudah tersimpan pada sistem. User dapat melihat perubahan biodata yang telah di-edit. Pada use case edit account user member dan admin dapat merubah data user dan user dapat melihat perubahan biodata yang telah diedit. Tabel 3.5 Use Case Scenario Tambah Data Berita Use case Tambah Data Berita name Actor User Admin Brief User admin ingin membuat pembaharuan mengenai berita fotografi. Basic flow a. User sudah masuk ke dalam website. b. Sistem menampilkan menu pada halaman user. c. User memilih menu Berita. d. User mengisi Berita. Alternative flow Jika data yang diisi tidak lengkap maka sistem memberikan pesan kesalahan dan meminta untuk melengkapinya. Pre Menu berita sudah ada di sistem. Post Admin berhasil menambah berita. Pada scenario tambah data berita hanya dapat dilakukan oleh user admin saja. setelah melakukan login dan masuk ke halaman admin. Tabel 3.6 Use Case Scenario Hapus Berita Use case Hapus Berita name Actor Admin. Brief Admin ingin menghapus data Berita.

29 Basic flow Alternative flow Pre Post a. Admin sudah masuk ke dalam website. b. Sistem menampilkan menu pada halaman Admin. c. Admin memilih menu berita. d. Admin menghapus berita. Jika data yang diisi tidak lengkap maka sistem memberikan pesan kesalahan dan meminta untuk melengkapinya. Menu Media sudah tersimpan pada sistem. Admin berhasil menghapus berita. Pada scenario hapus berita hanya dapat dilakukan oleh user admin saja. Admin memilih berita mana yang akan dihapus setelah melakukan login dan masuk ke halaman admin. Tabel 3.7 Use Case Scenario Tambah link Use case Tambah Link name Actor Admin. Brief Admin ingin menambah Link. Basic flow a. Admin sudah masuk ke dalam website. b. Sistem menampilkan menu pada halaman Admin. c. Admin memilih menu Link. d. Sistem menampilkan menu yang admin pilih. e. Admin memperbaharui Link. Alternative flow Jika data yang diisi tidak lengkap maka sistem memberikan pesan kesalahan dan meminta untuk melengkapinya. Pre Menu Link sudah tersimpan pada sistem. Post Admin berhasil meng-update Link terbaru.

30 Pada scenario tambah link hanya dapat dilakukan oleh user admin saja. Setelah admin melakukan login dan masuk ke halaman admin. Tabel 3.8 Use Case Scenario Hapus link Use case Hapus link name Actor Admin. Brief Admin ingin menghapus Link. Basic flow a. Admin sudah masuk ke dalam website. b. Sistem menampilkan menu pada halaman Admin. c. Admin memilih menu Link. d. Sistem menampilkan menu yang admin pilih. e. Admin menghapus data link. Pre Menu hapus Link Kami sudah tersimpan pada sistem. Post Admin berhasil menghapus link. Pada scenario hapus link hanya dapat dilakukan oleh user admin saja. Setelah admin melakukan login dan masuk ke halaman admin. Tabel 3.9 Use Case Scenario Edit Profil Use case Edit Profil name

31 Actor Brief Basic flow Alternative flow Pre Post Admin. Admin ingin meng-edit Profil Kfj fotografi. a. Admin sudah masuk ke dalam website. b. Sistem menampilkan menu pada halaman Admin. c. Admin memilih Menu Profil. d. Sistem menampilkan sub menu yang admin pilih. e. Admin mengubah profil yang dipilih. Jika data yang diisi tidak lengkap maka sistem memberikan pesan kesalahan dan meminta untuk melengkapinya. Menu profil sudah tersimpan pada sistem. Admin berhasil meng-edit profil Kfj fotografi. Pada scenario edit profile hanya dapat dilakukan oleh user admin saja. Setelah admin melakukan login dan masuk ke halaman admin. Tabel 3.10 Use Case Scenario Tambah video tips dan trik Use name Actor Brief Basic flow case Tambah video tips dan trik Admin. Admin ingin menambah data video tips dan trik. a. Admin sudah masuk ke dalam website. b. Sistem menampilkan menu pada halaman Admin. c. Admin memilih menu video tips dan trik. d. Sistem menampilkan menu yang admin pilih. e. Admin meambahkan video.

32 Alternative flow Pre Post Jika data yang diisi tidak lengkap maka sistem memberikan pesan kesalahan dan meminta untuk melengkapinya. Menu Struktur sudah tersimpan pada sistem. Admin berhasil menambah video tips dan trik. Pada scenario Tambah video tips dan trik hanya dapat dilakukan oleh user admin saja. Setelah admin melakukan login dan masuk ke halaman admin. Tabel 3.11 Use Case Scenario Hapus video tips dan trik Use name Actor Brief Basic flow case Alternative flow Pre Hapus video tips dan trik Admin. Admin ingin menambah data video tips dan trik. a. Admin sudah masuk ke dalam website. b. Sistem menampilkan menu pada halaman Admin. c. Admin memilih menu video tips dan trik. d. Sistem menampilkan menu yang admin pilih. e. Admin Hapus video. Jika data yang diisi tidak lengkap maka sistem memberikan pesan kesalahan dan meminta untuk melengkapinya. Menu Struktur sudah tersimpan pada sistem. Pada scenario Tambah video tips dan trik hanya dapat dilakukan oleh user admin saja. Setelah admin melakukan login dan masuk ke halaman admin. Tabel 3.12 Use Case Scenario Tambah Gallery Use case Tambah Gallery name

33 Actor Brief Basic flow Alternative flow Pre Post Admin, Member Admin atau member ingin menambah data Gallery. a. Admin sudah masuk ke dalam website. b. Sistem menampilkan menu pada halaman Admin. c. Admin memilih menu Gallery. d. Sistem menampilkan menu yang admin pilih. e. Admin menambah data Gallery. Jika data yang diisi tidak lengkap maka sistem memberikan pesan kesalahan dan meminta untuk melengkapinya. Menu Gallery sudah tersimpan pada sistem. Admin berhasil menambah Gallery. Pada scenario Tambah gallery hanya dapat dilakukan oleh user admin dan user member saja. Setelah admin dan member melakukan login dan masuk ke halaman admin dan member. Tabel 3.13 Use Case Scenario Hapus Gallery Use case name Actor Brief Hapus Gallery Admin. Admin ingin menghapus Gallery.

34 Basic flow a. Admin sudah masuk ke dalam website. b. Sistem menampilkan menu pada halaman Admin. c. Admin memilih menu Gallery. d. Sistem menampilkan menu yang admin pilih. e. Admin memperbaharui data Gallery. Alternative flow Pre Jika data yang diisi tidak lengkap maka sistem memberikan pesan kesalahan dan meminta untuk melengkapinya. Menu Gallery sudah tersimpan pada sistem. Post Admin berhasil menghapus Gallery. Pada scenario hapus gallery hanya dapat dilakukan oleh user admin saja. Setelah admin login dan masuk kehalaman admin. Tabel 3.14 Use Case Scenario Tambah Topik forum Use name Actor Brief Basic flow case Alternative flow Pre Tambah topik forum Admin. Admin ingin menambah topik forum. a. Admin sudah masuk ke dalam website. b. Sistem menampilkan menu pada halaman Admin. c. Admin memilih menu forum. d. Sistem menampilkan menu yang admin pilih. e. Admin memperbaharui data forum. Jika data yang diisi tidak lengkap maka sistem memberikan pesan kesalahan dan meminta untuk melengkapinya. Menu Gallery sudah tersimpan pada sistem. Pada scenario tambah topik forum hanya dapat dilakukan oleh user admin saja. Setelah melakukan login kehalaman admin. Tabel 3.15 Use Case Scenario Hapus forum

35 Use case name Actor Brief Basic flow Alternative flow Pre Post Hapus forum Admin. Admin ingin menghapus topik forum. a. Admin sudah masuk ke dalam website. b. Sistem menampilkan menu pada halaman Admin. c. Admin memilih menu forum. d. Sistem menampilkan menu yang admin pilih. e. Admin mengahpus topik forum. Jika data yang diisi tidak lengkap maka sistem memberikan pesan kesalahan dan meminta untuk melengkapinya. Menu forum sudah tersimpan pada sistem. Admin berhasil menghapus topik forum. Pada scenario hapus forum hanya dapat dilakukan oleh user admin saja. Setelah melakukan login kehalaman admin. Tabel 3.16 Use Case Scenario isi forum

36 Use case name Actor Brief Basic flow Alternative flow Pre Post Isi forum Admin, member. Admin atau member ingin mengisi atau mmenjawab forum. a. Admin, member sudah masuk ke dalam website. b. Sistem menampilkan menu pada halaman Admin. c. Admin, member memilih menu forum. d. Sistem menampilkan menu yang admin pilih. e. Admin, member mengisi forum forum. Jika data yang diisi tidak lengkap maka sistem memberikan pesan kesalahan dan meminta untuk melengkapinya. Menu forum sudah tersimpan pada sistem. Admin berhasil mengisi atau menjawab forum. Pada scenario isi forum hanya dapat dilakukan oleh user admin dan member saja setelah melakukan login. 3.4.3 Sequence Diagram. Sequence diagram adalah suatu diagram yang menggambarkan interaksi antar objek dan mengindikasikan komunikasi diantara objek-objsek tersebut. Diagram ini juga menunjukkan serangkaian pesan yang dipertukarkan oleh objekobjek yang melakukan suatu tugas atau aksi tertentu. Berikut merupakan Sequence diagram dari interaksi Aplikasi Kfj fotografi:

37 3.4.3.1 Sequence Diagram User Guest. Berikut ini merupakan sequence diagram menu aplikasi dari user guest ( lihat gambar 3.3): Gambar 3.3 Sequence Diagram User Guest. pada gambar sequence diagram user guest gambar 3.3 diterangkan user guest mengunjungi website kfj fotografi, user guest hanya dapat melihat gallery, tips dan trik fotografi dan melakukan sign up member. 3.4.3.3 Sequence Diagram Admin. gambar 3.5. Berikut ini merupakan sequence diagram menu aplikasi dari admin: lihat 3.4.3.2 Sequence Diagram sign up member. Berikut ini merupakan sequence diagram menu aplikasi dari sign up member: lihat gambar 3.4.

38 Gambar 3.4 Sequence Diagram sign up member Pada ggambar 3.4 sequence diagram sign up member diterangkan bahwa user melakukan sign up member sistem mengarahkan ke halaman form sign up member dan setelah selesai user guest sudah terdaftar menjadi member, user akan keluar atau masuk ke halaman member. 3.4.3.4 Sequence Diagram Admin. Berikut ini merupakan sequence diagram menu aplikasi dari admin: lihat gambar 3.5. Gambar 3.5 Sequence Diagram Admin

39 Pada gambar 3.5 Sequence diagram admin menerangkan bahwa admin melakukan login dan melakukan aktifitas mengelola data web. 3.4.4 Aktivity Diagram Activity diagram adalah representasi grafis dari alur kerja tahapan aktifitas. Diagram ini mendukung pilihan tindakan, iterasi dan konkurensi. Berikut merupakan Activity diagram dari aplikasi yang dibangun. 3.4.4.1 Activity Diagram User Guest. Activtity pada user guest, user guest hanya bisa memilih menu yang bisa dibuka tanpa harus menjadi member atau anggota komunitas fotografi. User guest hanya bisa melihat gallery foto dan video tips dan trik fotografi saja. Jika user guest ingin berkomentar diforum atau ingin membaca artikel fotografi dan ingin berkotribusi, menambahkan foto, user guest harus menjadi member kfj fotografi. Lihat gambar 3.6. Gambar 3.6 Activity Diagram User Guest.

40 3.4.4.2 Activity diagram User Member Activtity pada user member berbeda user guest yang hanya bisa memilih menu yang bisa dibuka tanpa harus sign in. User member atau anggota komunitas fotografi yang diberikan hak akses untuk mengupload foto, membaca artikel dan menjawab forum. Lihat gambar 3.7. Gambar 3.7 Activity Diagram Sign in Member

Gambar 3.8 Member menambah data gallery 41

42 Gambar 3.9 Member create forum 3.4.4.2 Activity Diagram Admin Activtity pada Admin, Admin adalah operator web yang memiliki hak akses penuh, untuk mengatur atau mengedit data pada website. Pada gambar activity diagram admin ini di jelaskan, Admin sign-in pertama admin menuliskan url pada pencarian dengan menuliskan Http:// localhost/kfjfotografi/admin/, jika masih menggunakan server locallhost. Maka pada layar admin akan mncul admin interface untuk login dan admin masukan user name dan password, setelah admin berhasil masuk dengan username dan password yang benar maka admin akan berinterface dengan halaman admin. Di dalam halaman admin, admin bisa

43 melakukan INPUT, DELLET, EDIT data. Karna admin memiliki hak akses penuh pada web kfj fotografi. Lihat gambar 3.8. Gambar 3.10 Activity Diagram Admin log in

44 Gambar 3.11 Admin kelola profile Gambar 3.12 Admin kelola data tips dan trik video

Gambar 3.13 Admin kelola data link 45

Gambar 3.14 Admin kelola data member 46

Gambar 3.15 Admin kelola data gallery 47

Gambar 3.16 Admin Kelola data forum 48

49 3.4.5. ER Diagram Diagram Relasi Entitas ini berguna untuk memberikan gambaran hubungan antara relasi sehingga dapat diimplementasikan dalam aplikasi yang akan dibuat. Pada gambar 3.9 berikut menampilkan tabel ER Diagram : Gambar 3.17 Relasi Antar Tabel 3.4.6. Perancangan Basis data Pada aplikasi sistem informasi tips dan trik fotografi berbasis web ini diperlukan database untuk menyimpan data yang diperlukan untuk menjalankan aplikasi. Di dalam database terdapat tabel-tabel yang sesuai dengan fungsinya masing-masing. Tabel yang terdapat pada database yaitu antara lain:

50 3.4.6.1 Tabel Berita Struktur field dari tabel Berita dapat dilihat pada Tabel 3.16 berikut: Tabel 3.16 Tabel Berita Nama Field Tipe Data Field size keterangan idberita int 11 Nomor berita judul char 50 Judul berita tanggal date - Tanggal posting isi text - Isi berita gambar varchar 1 Nama gambar Tabel berita pada Tabel 3.16 diatas digunakan untuk menyimpan berita-berita dari kfjfotografi yang berisi tips dan trik fotgrafi. 3.4.6.2 Tabel kategori Sturktur field dari tabel kategori dapat dilihat pada Tabel 3.17 berikut: Tabel 3.17 Tabel kategori Nama Field Tipe Field size keterangan Data Cat_id int 8 Nomor categori Tabel kategori pda Tabel 3.17 diatas digunakan untuk menyimpan data kategori gallery. 3.4.6.3 Tabel forum Cat_name Varchar 25 Nama categori Stuktur Tabel dari tabel forum dapat dilihat pada tabel 3.18: 3.4.6.4 Tabel Gallery Stuktur Tabel dari tabel gallery dapat dilihat pada tabel 3.19: Tabel 3.18 Tabel forum Nama Tipe keterangan Field size Field data idforum int 8 Nomor forum dibuka date - Tanggal buka forum ditutup varchar 50 Forum ditutup judul invarchar 50 Judul forum Isi Text - Idsi forum status Int 1 Ststus forum

51 Tabel forum pada tabel 3.18 diatas digunakan untuk menyimpan data forum. Nama keterangan Type Faild size Field idgaller Int 8 Nomor gallery y nama Char 25 Nama gallery gambar Varchar 1 Gambar gallery approve Varchar 1 Approvel l Upload_ Datetime - Tanggal upload date Upload_ Varchar 20 Nama pengunggah by Cat_id Varchar 20 Categori nomor Descript Varchar 100 keterangan ion Tabel 3.19 Tabel Gallery Tabel gallery pada tabel 3.19 diatas digunakan untuk menyimpan data Gallery. 3.4.6.5 Tabel komentar Struktur tabel komentar dapat dilihat pada tabel 3.20 berikut: Nama Field Id_kom entar id_foru m Id_mem ber tanggal komenta r T yp e In t In t Faild size keterangan 8 Auto_increment 8 Nomor forum In 8 Nomor member t da - Tanggal tet im e te - Isi komentar xt Tabel 3.20 Tabel komentar Tabel komentar pada tabel 3.20 diatas digunakan untuk menyimpa data komentar.

52 3.4.6.6 Tabel Link Struktur tabel link dapat dilihat pada tabel 3.21 berikut: Tabel 3.21 Tabel Link Nama keterangan Type Faild size Field Id_link Int 8 Nomor urut tautan link Nama Int 20 Nama tautan link link Int 20 Tautan link Tabel link pada tabel 3.21 diatas digunakan untuk menyimpan Link-link web lain sebagai rujukan. 3.4.6.7 Tabel Member Struktur tabel member dapat dilihat pada tabel 3.22 berikut: Tabel 3.22 Tabel Member Nama keterangan Type Faild size Field Id_me Int 8 Nomor member mber nama varch ar 25 Nama member email varch 20 Email member ar photo varch 1 Foto member ar gender varch 5 Gender member ar status Int 1 Satatus member passw varch 8 Password member ord ar Tabel Member pada tabel 3.22 diatas digunakan untuk menyimpan data member kfj fotografi. 3.4.6.8 Tabel Profile Struktur tabel profile dapat dilihat pada tabel 3.23 berikut: Tabel 3.23 Tabel profile Nama Field Type Faild size keterangan

53 Deskripsi Text - Deskripsi profile Tabel profile pada tabel 3.9 diatas digunakan untuk menyimpan data profile kfjfotografi. 3.4.6.9 Tabel Slidesow Struktur tabel profil dapat dilihat pada tabel 3.24 berikut: Tabel 3.24 Tabel slideshow Nama Type Faild keterangan Field size Id_slide int 8 Nomor slide gambar varchar 1 Gambar Tabel slideshow pada 3.24 diatas digunakan untuk menyimpan data slideshow gallery kfjfotografi. 3.4.6.10 Tabel tips Struktur tabel tips dapat dilihat pada tabel 3.25 berikut: Tabel 3.25 Tabel Tips Nama Field Type Faild size keterangan Id_tips Int 8 Nomor tips nama Char 25 Nama tips description Varchar 100 Keterangan tips filepath Varchar 10 Filepath tips Upload_date datetime - Tanggal upload approvel varchar 1 Menyetujui tayang Tabel tips pada 3.25 diatas digunakan untuk menyimpan data tips dan trik fotografi. 3.4.7. Perancangan Interface. Perancangan interface merupakan tampilan antar muka yang dilihat oleh user guna pada aplikasi ini, perancangan interface dibuat oleh penulis semudah mungkin

54 untuk dapat digunakan oleh user. Berikut merupakan rancangan interface aplikasi: Berikut rancangan layout interface: Gambar 3.18 Rancangan interface aplikasi Gambar 3.19 Rancangan lay out interface

55 a. Header Header berisi logo komunitas b. Navigasi / menu Navigasi berisi menu untuk berpindah antar halaman. Menu yang tersedia adalah berikut: - Home : halaman utama / home page. - Gallery : memuat informasi kategori gallery yang berisi gambar. - Tips Video : memuat informasi tips dan trik fotografi berbentuk video yang conect ke youtube. - Sign up member : menu ini berfungsi untuk regristrasi menjadi member atu anggota. - Menu sign in : menu ini berfungsi untuk sign in ke halaman member. c. Content Content yang berfungsi untuk memuat halaman yang dibuka melalui navigasi atau menu. d. Footer Footer untuk memuat tanggal atau tahun pembuatan web. Halaman form sign up member: 1. Tampilan form sign up member. Merupakan tampilan berbentuk list view, ketika melakukan klik pada menu sign up member maka user akan diarahkan ke tampilan preview sign up member. Lihat gambar 3.12 Gambar 3.20 gambar layout sign up member

56 Halaman form sign in member: 2. Tampilan form sign in. Merupakan tampilan berbentuk list view, ketika melakukan klik pada menu sign in maka user akan diarahkan ke tampilan preview sign in. Lihat gambar 3.13 Gambar 3.21 sign in member Form login admin: Form log in admin adlah form yang berisi email atau user name yang di gunakan admin untuk masuk kedalam web.lihat gambar 3,14 Gambar 3.22 layout login admin

57 Halaman Admin interface: 1. Tampilan Halaman Admin Interface. Merupakan tampilan berbentuk list view, ketika selesai melakukaan login admin maka admin akan diarahkan ke tampilan preview login dan halaman admin interface merupakan halaman untuk admin melakukan perubahan pada web atau mengedit data yang ada didalam aplikasi Kfj fotografi. Lihat gambar 3.15 Gambar 3.15 Halaman interface admin