Gambar 3.34 Rancangan Layar Detil Artikel.
Rancangan Layar Detil Artikel ini berisi informasi detil Artikel yang berasal dari kata kunci atau kategori yang dipilih oleh user.
126
Gambar 3.35 Rancangan Layar Berita.
Rancangan ini merupakan layar Berita untuk semua user yang mengakses website Hardcore Gym. Layar Artikel ini berisi seluruh informasi dan berita – berita terkini mengenai kesehatan dan kebugaran dan juga informasi mengenai Hardcore Gym. mengenai kesehatan, kebugaran dan sejenisnya. Menu “Cari Berita” berguna untuk mencari semua berita yang ada di website Hardcore Gym sesuai dengan kata kunci.
Gambar 3.36 Rancangan Layar Pencarian Berita.
Rancangan Layar Pencarian Berita berisi hasil pencarian berita – berita terkini yang terdapat pada website Hardcore Gym. Sesuai dengan kata kunci yang dimasukkan oleh user.
128
Gambar 3.37 Rancangan Layar Detil Berita.
Layar Detil Berita ini berisi informasi detil Berita yang berasal dari kata kunci atau kategori yang dipilih oleh user.
Gambar 3.38 Rancangan Layar Kontak Kami.
Layar Kontak Kami ini berisi informasi alamat, nomor telepon, dan email yang dimiliki Hardcore Gym.
130
Gambar 3.39 Rancangan Layar Membership.
Rancangan Layar Membership ini berisi informasi tentang paket – paket membership yang ditawarkan Hardcore Gym. Informasi biaya jika menjadi member. Dan juga informasi – informasi mengenai promosi – promosi yang diberikan oleh Hardcore Gym untuk calon membernya. Manu “Daftar” berguna bagi user untuk melakukan registrasi (Menampilkan Layar Registrasi).
Gambar 3.40 Rancangan Layar Lupa Password.
Rancangan Layar Lupa Password ini berguna bagi user yang lupa username atau passwordnya. Setelah data yang diperlukan telah diisi semua, username dan password akan dikirim ke email
132
Gambar 3.41 Rancangan Layar Berhasil Lupa Password.
Rancangan layar berhasil lupa password berisi informasi bahwa proses permintaan lupa password yang dilakukan user telah berhasil.
2. Rancangan Layar Setelah Log Masuk – Member
Rancangan layar berikut ini ditujukan untuk member yang mengakses website Hardcore Gym.
Gambar 3.42 Rancangan Layar Utama-Member.
Rancangan layar utama member berisi informasi – informasi yang dibutuhkan oleh member seperti pesan terbaru dari admin dan instruktur.
Menu ‘Profile’ berguna untuk menampilkan Layar Profil-member.
134
Menu ‘Balas pesan’ berguna untuk menampilkan Layar Tulis Pesan-member. Menu ‘Lihat semua pesan’ berguna untuk menampilkan Layar Pesan-member. Menu ‘Jadwal’ berguna untuk menampilkan layar Jadwal-member.
Menu ‘Log Keluar’ berguna untuk keluar dari Layar Utama-member (tampilkan layar utama) Menu – menu yang disebutkan diatas mempunyai fungsi yang sama pada layar – layar berikutnya dengan nama menu yang sama.
Gambar 3.43 Rancangan Layar Profil-Member. Rancangan layar ini berisi informasi data diri member.
136
Gambar 3.44 Rancangan Layar Ubah Profil-Member.
Rancangan layar ini ubah profil-member berguna untuk mengubah data diri member.
“Username” berguna untuk memasukkan username member dan digunakan untuk log masuk. “Password” berguna untuk memasukkan password yang diinginkan member.
“Ulangi Password” berguna untuk mengulangi password member. “Nama” berguna untuk memasukkan nama asli member.
“Tanggal Lahir” berguna untuk memasukkan tanggal lahir member. “Alamat” berguna untuk memasukkan alamat member.
“Kode Pos” berguna untuk memasukkan kode pos dari alamat member. “Telepon” berguna untuk memasukkan nomor telepon rumah member. “Handphone” berguna untuk memasukkan nomor handphone member. “Email” berguna untuk memasukkan email member.
“Paket Member” berguna untuk menentukan paket member yang akan dipilih.
Menu ’Ubah’ berguna sebagai menu untuk merubah data diri member setelah data – data diri telah terisi semua.
138
Gambar 3.45 Rancangan Layar Ganti Password-Member.
Rancangan layar ganti password- member berguna untuk mengganti password member. ‘Password lama’ berguna untuk memasukkan password lama member yang akan diganti. ‘Password baru’ berguna untuk memasukkan password baru member.
‘Konfirmasi password baru’ berguna memasukkan password baru sekali lagi untuk mencegah kesalahan saat penggantian password.
Menu ‘Ok’ berguna untuk melanjutkan proses penggantian password setelah data – data yang dibutuhkan telah terisi semua.
Gambar 3.46 Rancangan Layar Konfirmasi Ganti Password-Member. Rancangan layar konfirmasi Password berguna untuk memastikan bahwa member benar – benar ingin melakukan penggantian password.
Menu ‘ya’ berguna untuk menjalankan proses penggantian password.
Menu ‘kembali’ berguna untuk membatalkan penggantian password (Tampilkan layar ganti password-member).
140
Gambar 3.47 Rancangan Layar Berhasil Ganti Password-Member.
Rancangan layar berhasil ganti password-member berisi informasi bahwa member telah berhasil melakukan penggantian password akunnya.
Gambar 3.48 Rancangan Layar Jadwal-Member.
Rancangan layar Jadwal-Member ini berisi informasi jadwal member. ’Tanggal’ merupakan tanggal jadwal latihan, ’Jam’ adalah jam jadwal latihan pada tanggal tersebut, dan ’Instruktur’ adalah informasi instruktur yang dipilih member sebagai instrukturnya.
Menu ’Atur jadwal’ berguna untuk menampilkan layar atur jadwal-member. Menu ’Pilih semua’ berguna untuk menandai semua penjadwalan yang ada.
Menu ’Kosongkan semua’ berguna untuk tidak menandai semua penjadwalan yang ada. Menu ’Batal yang ditandai’ berguna untuk membatalkan jadwal yang sudah ada dan yang telah ditandai oleh member.
142
Menu – menu yang mempunya nama dan fungsi yang sama akan di pakai di layar selanjutnya.
Gambar 3.49 Rancangan Layar Atur Jadwal-Member.
Rancangan layar jadwal-member berisi informasi – informasi jadwal yang dapat di pilih saat member ingin mengatur jadwal latihannya. Menu ‘Kalender’ berfungsi bagi
member menentukan tanggal untuk mencari informasi jadwal yang tersedia pada tanggal tersebut. ‘Jam’ berisi informasi jam penjadwalan yang telah tersedia atau tidak. ‘member’ berisi informasi nama – nama member yang telah mengisi jadwal. ‘Instruktur’ berisi informasi instruktur yang telah dipilih. ‘status’ berguna untuk memberikan informasi bahwa pada tanggal dan jam tersebut jadwal sudah teriisi atau belum jika belum member yang ingin mengatur jadwal dapat langsung mengisi jadwal pada tanggal dan jam tersebut.
Menu ‘lihat jadwal’ berguna untuk kembali ke layar jadwal-member.
144
Rancangan layar pesan-member Berisi informasi semua pesan yang ada untuk member. Menu ‘Tulis Pesan’ berguna untuk menampilkan layar tulis pesan-member.
Menu ‘Lihat semua’ berguna untuk menampilkan semua pesan yang ada.
Menu ‘Belum dibaca’ berguna untuk menampilkan semua informasi pesan yang belum dibaca oleh member.
Menu ‘Sudah dibaca’ berguna untuk menampilkan semua pesan yang sudah dibaca member.
Menu ‘Tandai Semua’ berguna untuk menandai pesan.
Menu ‘Hapus yang ditandai’ berguna untuk menghapus pesan yang telah ditandai. Menu ‘Baca’ berguna untuk menampilkan layar baca pesan member.
Gambar 3.51 Rancangan Layar Baca Pesan-Member. Rancangan layar baca pesan- member berisi detail pesan-member.
Menu ‘<<Kembali’ berguna untuk kembali ke layar pesan-member (Tampilkan layar pesan-member).
Menu ‘Balas’ berguna untuk membalas pesan (Tampilkan layar tulis pesan-member). Menu ‘Hapus’ berguna untuk menghapus pesan.
146
Gambar 3.52 Rancangan Layar Tulis Pesan-Member.
Rancangan layar Tulis pesan berguna bagi member untuk menulis pesan atau membalas pesan.
‘Ke’ berguna untuk menentukan penerima pesan yang akan dikirim (penerima adalah admin atau instruktur).
‘Topik’ berguna untuk memasukkan topik. ‘Isi Pesan’ berguna untuk memasukkan isi pesan.
Menu ‘Kirim’ berguna untuk melakukan proses mengirim pesan setelah semua data – data yang diperlukan telah terisi semua.
Gambar 3.53 Rancangan Layar Tentang Kami-Member
Rancangan layar ini berisi informasi Tentang Kami yang menampilkan informasi tentang Hardcore Gym mulai dari awal hingga saat ini.
148
Gambar 3.54 Rancangan Layar Kontak Kami
Rancangan layar ini berisi informasi mengenai alamat, no telepon, dan informasi-informasi lainnya untuk mengontak pihak Hardcore Gym.
3. Rancangan Layar Setelah Log Masuk – Instruktur
Rancangan layar berikut ini ditujukan untuk instruktur yang mengakses website Hardcore Gym.
Gambar 3.55 Rancangan Layar Utama-Instruktur
Rancangan layar utama instruktur berisi informasi – informasi yang dibutuhkan oleh instruktur seperti pesan terbaru dari admin dan member.
150
Menu ‘Ubah Profil’ berguna untuk menampilkan Layar Ubah Profile- instruktur. Menu ‘Ganti Password’ berguna untuk menampilkan Layar Ganti Password-member. Menu ‘Balas pesan’ berguna untuk menampilkan Layar Tulis Pesan- instruktur. Menu ‘Lihat semua pesan’ berguna untuk menampilkan Layar Pesan- instruktur. Menu ‘Jadwal’ berguna untuk menampilkan layar Jadwal- instruktur.
Menu ‘Log Keluar’ berguna untuk keluar dari Layar Utama- instruktur (tampilkan layar utama)
Menu – menu yang disebutkan diatas mempunyai fungsi yang sama pada layar – layar berikutnya dengan nama menu yang sama.
Gambar 3.56 Rancangan Layar Profile-Instruktur Rancangan layar ini berisi informasi data diri member.
152
Utama Registrasi Artikel Tentang Kami Kontak Kami Membership Edit Profil
Instruktur
Judul Halaman (Profil)
#Edit Profile Instruktur#
Username : Password : Confirm Password : Nama : Jenis Kelamin : Tanggal lahir : Alamat : Kode Pos : Telepon : Handphone : Email :
Utama Profil Jadwal Pesan Artikel Berita Tentang Kami Kontak Kami
Selamat datang, ‘username’ Profil Edit Profil Ganti Password Member Log keluar Edit
Gambar 3.57 Rancangan Layar Edit Profile-Instruktur
Rancanan layar ini Edit Profile-Instruktur berguna untuk mengubah data diri instruktur.
“Username” berguna untuk memasukkan username instruktur dan digunakan untuk log masuk. “Password” berguna untuk memasukkan password yang diinginkan instruktur.
“Ulangi Password” berguna untuk mengulangi password instruktur. “Nama” berguna untuk memasukkan nama asli instruktur.
“Jenis Kelamin” berguna untuk menentukan jenis kelamin instruktur. “Tanggal Lahir” berguna untuk memasukkan tanggal lahir instruktur. “Alamat” berguna untuk memasukkan alamat instruktur.
“Kode Pos” berguna untuk memasukkan kode pos dari alamat instruktur. “Telepon” berguna untuk memasukkan nomor telepon rumah instruktur. “Handphone” berguna untuk memasukkan nomor handphone instruktur. “Email” berguna untuk memasukkan email instruktur.
Menu ’Edit’ berguna sebagai menu untuk merubah data diri member setelah data – data diri telah
154
Utama Registrasi Artikel Tentang Kami Kontak Kami Membership Konfirmasi ganti
profil instruktur
Apakah anda benar – benar ingin mengedit profil anda dan data yang anda masukkan sudah benar?
Kembali ke halaman utama
Ya Kembali
Utama Profil Jadwal Pesan Artikel Berita Tentang Kami Kontak Kami
Gambar 3.58 Rancangan Layar Konfirmasi Edit Profile Instruktur Rancangan layar ini berisi tampilan konfirmasi untuk merubah profile instruktur
Utama Registrasi Artikel Tentang Kami Kontak Kami Membership Berhasil ganti
pass instruktur
Utama Profil Jadwal Pesan Artikel Berita Tentang Kami Kontak Kami
Ok Ganti password
Untuk merubah password anda harus memasukkan password lama dan harap selalum mengingat password baru anda. Password lama : Password baru : Konfirmasi password baru :
Gambar 3.59 Rancangan Layar Ubah Password Instruktur Rancangan layar ini berfungsi untuk mengubah password instruktur.
Instruktur akan diminta untuk memasukkan lagi password lama, password baru, dan konfirmasi password baru.
156
Utama Registrasi Artikel Tentang Kami Kontak Kami Membership Konfirmasi ganti
password instruktur
Apakah anda benar – benar ingin mengganti password akun anda?
Kembali ke halaman utama
Ya Kembali
Utama Profil Jadwal Pesan Artikel Berita Tentang Kami Kontak Kami
Gambar 3.60 Rancangan Layar Konfirmasi Ganti Password Instruktur Rancangan layar ini berisi tampilan konfirmasi untuk merubah password instruktur
Gambar 3.61 Rancangan Layar Berhasil Ganti Password Instruktur Rancangan layar ini berisi tampilan konfirmasi berhasil ganti password instruktur
158
Gambar 3.62 Rancangan Layar Jadwal Instruktur
Rancangan layar ini merupakan rancangan layar Atur Jadwal Instruktur yang berisi detail informasi untuk mengatur jadwal instruktur, seperti melihat jadwal yang ada.
Gambar 3.63 Rancangan Layar Jadwal-Instruktur
Rancangan layar Jadwal-Instruktur ini menampilkan informasi tentang jadwal yang akan diikuti oleh instruktur, yang berisi calendar, jam melatih, dan member yang dilatih.
160
Gambar 3.64 Rancangan Layar Pesan-Instruktur
Rancangan layar pesan-instruktur Berisi informasi semua pesan yang ada untuk instruktur.
Menu ‘Tulis Pesan’ berguna untuk menampilkan layar tulis pesan- instruktur. Menu ‘Lihat semua’ berguna untuk menampilkan semua pesan yang ada.
Menu ‘Belum dibaca’ berguna untuk menampilkan semua informasi pesan yang belum dibaca oleh instruktur.
Menu ‘Sudah dibaca’ berguna untuk menampilkan semua pesan yang sudah dibaca instruktur.
Menu ‘Tandai Semua’ berguna untuk menandai pesan.
Menu ‘Hapus yang ditandai’ berguna untuk menghapus pesan yang telah ditandai. Menu ‘Baca’ berguna untuk menampilkan layar baca pesan instruktur.
Menu ‘Hapus’ berguna untuk menghapus pesan.
Gambar 3.65 Rancangan Layar Tulis Pesan-Instruktur
162
‘Ke’ berguna untuk menentukan penerima pesan yang akan dikirim (penerima adalah admin atau member).
‘Topik’ berguna untuk memasukkan topik. ‘Isi Pesan’ berguna untuk memasukkan isi pesan.
Menu ‘Kirim’ berguna untuk melakukan proses mengirim pesan setelah semua data – data yang diperlukan telah terisi semua.
Gambar 3.66 Rancangan Layar Baca Pesan-Instruktur Rancangan layar baca pesan- instruktur berisi detail pesan- instruktur.
Menu ‘<<Kembali’ berguna untuk kembali ke layar pesan- instruktur (Tampilkan layar pesan- instruktur).
Menu ‘Balas’ berguna untuk membalas pesan (Tampilkan layar tulis pesan- instruktur).
164
Gambar 3.67 Rancangan Layar Tentang Kami-Member
Rancangan layar ini berisi informasi Tentang Kami yang menampilkan informasi tentang Hardcore Gym mulai dari awal hingga saat ini.
Gambar 3.68 Rancangan Layar Kontak Kami
Rancangan layar ini berisi informasi mengenai alamat, no telepon, dan informasi-informasi lainnya untuk mengontak pihak Hardcore Gym.
3.4.4 Perancangan Basis Data Pada Solusi
Setelah perancangan storyboard dapat disusun perancangan basis data untuk solusi.Basis data disusun menggunakan database engine MySQL versi 5.0.20.Untuk perancangan tabel dalam basis data bisa dilihat dalama tabel-tabel di bawah ini.
166
Rancangan tabel-tabel pada aplikasi ini akan diimplementasikan dengan menggunakan
database engine : MySQL Server versi yang digunakan adalah versi 5.0.41-community-nt
Berikut ini merupakan definisi dari tabel-tabel yang akan digunakan pada aplikasi yang diusulkan :
Tabel 3.17b Tabel Contoh ms_jadwal
Deskripsi : Tabel ini digunakan untuk menampung mengenai data user untuk digunakan untuk log masuk.
Primari Key : kode_user
No. Nama Field Tipe Data Keterangan
1. kode_user Int PK, 1 : kode user
2. username varchar(30) Username semua user untuk log masuk
3. password varchar(20) Password semua user untuk log masuk
4. level Int Untuk menampung level user menentukan
level user 1:member 2: instruktur 3:admin
Tabel 3.10b Tabel Contoh ms_user
kode_user username password level
kode_user username password level
2 armand armand 1
Tabel 3.11a Definisi Tabel ms_member
Deskripsi : Tabel ini digunakan untuk menampung semua mengenai data diri member
Primari Key : kode_member
No. Nama Field Tipe Data Keterangan
1. kode_member Int PK, 1 : kode user-Member
2. kode_user Int FK1 dari ms_user. Username dan password
dari member tersebut
3. nama varchar(30) Untuk menampung nama asli member
4. Jenis_kelamin varchar(10) Untuk menampung jenis kelamin member
5. tanggal_lahir varchar(8) Untuk menampung tanggal lahir member
6. alamat_member varchar(50) Untuk menampung alamat member
7. kode_pos varchar(6) Untuk menampung kode pos member
8. telepon varchar(12) Untuk menampung telepon member
9. handphone varchar(14) Untuk menampung handphone member
10. email varchar(20) Untuk menampung email member
168
No. Nama Field Tipe Data Keterangan
12 status Int Untuk menampung status member, 1 : aktif
Tabel 3.11b Tabel Contoh ms_member kode_me mber kode_ user nama jenis_kel amin Tanggal_lah ir alamat_me mber kode_ pos telepon handpho ne email kode_p aket stat us 1 1 Rafki Chan dra Pria 09Septembe r1987 Jln. Taman malaka utama 5 10111 021666 66 0811811 811 [email protected] om 1 1 2 2 Zukm an Pria 13Septembe r1987 Jln. Jalan no 100 10111 021000 000 0811111 111 zukman@zukam na.com 2 1
170
Tabel 3.12a Definisi Tabel ms_instruktur
Deskripsi : Tabel ini digunakan untuk menampung semua mengenai data diri instruktur
Primari Key : kode_instruktur
No. Nama Field Tipe Data Keterangan
1. kode_instruktur Int PK, 1 : kode user-Instruktur
2. kode_user Int FK dari ms_user. Username dan password
dari instruktur tersebut
3. Nama varchar(30 Untuk menampung nama asli instruktur
4. Jenis_kelamin varchar(10) Untuk menampung jenis kelamin instruktur
5. tanggal_lahir varchar(8) Untuk menampung tanggal lahir instruktur
6. Alamat varchar(50) Untuk menampung alamat instruktur
7. kode_pos varchar(6) Untuk menampung kode pos instruktur
8. Telepon varchar(12) Untuk menampung telepon instruktur
9. Handphone varchar(14) Untuk menampung handphone instruktur
Tabel 3.12b Tabel Contoh ms_instruktur kode_instr uktur kode_u ser nama jenis_kela min Tanggal_lahi r alamat kode _pos tele pon handpho ne email 1 1 Rafki Chan dra Pria 09September 1987 Jln. Taman malaka utama 5 1011 1 021 666 66 0811811 811 [email protected] om 2 2 Zukm an Pria 13September 1987 Jln. Jalan no 100 1011 1 021 000 000 0811111 111 zukman@zukam na.com
172
Tabel 3.13a Definisi Tabel ms_admin
Deskripsi : Tabel ini digunakan untuk menampung mengenai data admin dan nama admin
Primari Key : kode_admin
No. Nama Field Tipe Data Keterangan
1. kode_admin Int PK, 1 : kode user
2. kode_user Int FK dari ms_user. Username dan password
dari Instruktur tersebut
3. nama_admin varchar(30) untuk menampung nama asli admin
Tabel 3.13b Tabel Contoh ms_admin kode_admin kode_user nama_admin
1 1 admin
2 2 armand
Tabel 3.14a Definisi Tabel ms_artikel
Deskripsi : Tabel ini digunakan untuk menampung semua data artikel - artikel
No. Nama Field Tipe Data Keterangan
1. kode_artikel Int PK, 1 : kode artikel
2. penulis_artikel varchar(20) untuk mengelompokkan artikel berdasarkan penulis
3. kategori_artikel varchar(25) untuk mengelompokkan artikel berdasarkan kategori
4. judul_artkel varchar(30) untuk mengelompokkan artikel berdasarkan
judul
5. isi_artikel varchar(1000) untuk menampung isi artikel
6. gambar_artikel varchar(200) untuk menampung gambar artikel
7. tanggal_update varchar(20) untuk mengetahui tanggal update artikel
8. kode_instruktur int FK1 dari ms_instruktur
9. kode_\admin int FK1 dari ms_admin
174
Tabel 3.14b Tabel Contoh ms_artikel kode_a rtikel penu lis_a rtike l kat ego ri_a rter i judul_ artikel isi_artik el gambar _artike l tan gg al_ up dat e kode_instru ktur kode_admin
