Website B4T Dengan Pemrograman PHP dan MySQL

Website Balai Besar Bahan dan Barang Teknik (B4T) Bandung merupakan website yang berfungsi untuk menginformasikan informasi yang berhubungan dengan instansi B4T. Pada website ini juga terdapat fitur untuk login anggota yang telah diregistrasi oleh administrator. Anggota yang telah terdaftar memiliki hak akses lebih dari pengunjung biasa seperti merubah data profil, merubah password, upload file, dan download file dari anggota lain. Website ini dikembangkan pada PDT Eclipse dengan menggunakan PHP sebagai script pemrograman dan MySQL sebagai pengelola basis data.

Berikut merupakan video, beserta screenshot dan penjelasan singkat dari tampilan website.

  I.       FRONT-END WEBSITE

Front-End Website merupakan tampilan untuk pengunjung dan anggota. Pada tampilan front end terdapat beberapa menu yaitu menu Home, Profil yang terdiri dari submenu (Tentang B4t, Sejarah, Visi Misi, dan Lokasi),  Fasilitas yang terdiri dari submenu fasilitas pada B4T, Organisasi yang terdiri Struktur dan Tugas Divisi, Galeri yang terdiri dari Album dan Foto, Anggota, Berita, dan Kontak Kami. Pada tampilan front end website juga terdapat konten isi, sidebar kanan, dan footer. Pada sidebar kanan terdapat fasilitas pencarian anggota, fasilitas login anggota, menu jurnal B4T, dan slider 5 berita terbaru.

1.      Tampilan Home

Tampilan home merupakan tampilan awal ketika website pertama kali diakses. Konten pada tampilan home akan menampilkan sekilas tentang B4T, Sejarah, dan Visi Misi. Isi konten pada tampilan home juga menampilkan fasilitas B4T yang berbentuk slider, dan beberapa list berita. Untuk lebih jelasnya dapat dilihat pada screenshot gambar dibawah berikut.

Gambar 1. Tampilan Home

2.      Tampilan List Album Foto

Pada menu galeri akan ditampilkan list album dan data foto-foto kegiatan yang berhubungan dengan B4T. Untuk lebih jelasnya berikut merupakan screenshot tampilan dari list album  dan data foto-foto kegiatan pada B4T.

Gambar 2. Tampilan List Album

3.      Tampilan  Anggota

Tampilan Anggota terdapat pada pada menu anggota. Pada tampilan anggota dapat dilihat list anggota yang telah diregistrasi oleh administrator. Berikut merupakan screenshot dari tampilan anggota.

Gambar 3. Tampilan Anggota

4.      Tampilan Detail Anggota

Tampilan detail anggota dapat dilihat dengan mengklik tombol detail dari salah satu daftar anggota pada tampilan anggota. Pada halaman detail anggota akan menampilkan profil lengkap anggota, dan file upload anggota. Berikut merupakan screenshot dari tampilan detail anggota.

Gambar 4. Tampilan Detail Anggota

II.      BACK-END WEBSITE

Back-End website merupakan tampilan administrator untuk melakukan manipulasi data ke database. Namun sebelum itu administrator diharuskan untuk melakukan login terlebih dahulu sebelum melakukan manipulasi data. Terdapat beberapa menu admin pada sidebar kiri yang digunakan administrator untuk melakukan manipulasi data.

1.      Tampilan Login Administrator

Pada tampilan login admin, administarotor diperlukan untuk memasukkan username dan password untuk melakukan login sebelum dapat mengakses halaman administrator. Berikut merupakan screenshot dari tampilan login admin.

Gambar 5. Tampilan Login Administrator

2.      Tampilan Data Foto

Pada tampilan data foto ditampilkan daftar data galeri foto. Pada tampilan ini admin dapat melakukan manipulasi data foto seperti tambah, edit, dan delete. Untuk melakukan tambah data baru administrator dapat mengklik tombol tambah, untuk melakukan edit dapat memilih icon edit, dan untuk melakukan hapus data dapat dipilih icon hapus pada kolom aksi. Berikut merupakan screenshot dari tampilan data foto.

Gambar 6. Tampilan Data Foto

3.      Tampilan Tambah Data Foto

Pada tampilan tambah data foto ditampilkan form tambah data foto. Administrator dapat memilih album pada data combo. Untuk melakukan simpan data, admin dapat mengklik tombol simpan. Untuk membatalkan penyimpanan admin dapat mengklik tombol batal. Berikut merupakan screenshot dari tampilan form tambah data foto.

Gambar 7. Tampilan Tambah Data Foto

4.      Tampilan Edit Data Foto

Pada tampilan edit data foto ditampilkan form edit data foto yang telah berisi value. Untuk melakukan edit data, admin dapat merubah value yang ingin dirubah dan mengklik tombol update. Untuk membatalkan edit, admin dapat mengklik tombol batal. Berikut merupakan screenshot dari tampilan form edit data foto.

Gambar 8. Tampilan Form Edit Data Foto