LAPORAN FINAL PROJECT

PENGANTAR BASIS DATA

oleh
KELOMPOK 5
ALVIN RAHMAN K (5213100031)
TETHA VALIANTA (5213100055)
ROBBY A. AUDA (5213100147)
Latar Belakang
Website pengarsipan PKM karya mahasiswa ITS ini dibuat untuk memenuhi tugas Final Project
mata kuliah Pengantar Basis Data, yaitu dengan mengumpulkan daftar karya-karya mahasiswa
ITS kemudian digunakan untuk menampilkan info mengenai :

Identitas mahasiswa (NRP, nama mahasiswa, email mahasiswa, telepon mahasiswa, fakultas
dan jurusan), Detail PKM (kode PKM, judul PKM, pendanaan PKM), Kategori PKM serta identitas
Dosen pembimbing.

Tujuan
Tujuan utama dari pembuatan Web berbasis database ini yaitu untuk memberikan suatu
informasi tentang bermacam-macam “KaryaTulis” yang telah didanai oleh Institut Teknologi
Sepuluh Nopember (ITS).

Melalui website ini, diharapkan karya-karya ITS dapat menjadi satu arsip dan dapat dijadikan
sebuah referensi penulisan karya tulis – karya tulis yang akan datang.

Aplikasi
Aplikasi yang digunakan untuk membuat Web “KaryaITS” diantaranya adalah :

- Sublime Text
- Xampp
- Google Chrome
- Navicat

Requirement Project
Website database “pengarsipan” ini khusus dirancang agar dapat melakukan beberapa fungsi, yaitu :

- Create
Membuat sebuah database / table untuk insert data ( memasukkan data ke dalam database
phpMyAdmin

- Read
Select untuk menampilkan sebuah data yang ada dari database phpMyAdmin
 - Update
Update untuk mengganti/memperbarui informasi mengenai pengumuman kegiatan
yang bersangkutan dengan PKM.

Database
Gambar di bawah ini adalah sebuah database dan alur relasinya pada Website “KaryaITS”,

Tabel dan Atribut yang terdapat pada database diatas adalah

Table : tb_mahasiswa
Nama Atribut Tipe Atribut Panjang Karakter
nrp BigInt 20
nama_mhs Varchar 50
email_mhs Varchar 50
phone_mhs Varchar 20
 fakultas Varchar 50
jurusan Varchar 50

Table : tb_kategori
Nama Atribut Tipe Atribut Panjang Karakter
nrp BigInt 20
kode_pkm Varchar 50
judul_pkm Varchar 50

Table : tb_dosen
Nama Atribut Tipe Atribut Panjang Karakter
id_dosen Varchar 50
nip BigInt 20
nrp BigInt 20
nama_dosen Varchar 50
phone_dosen Varchar 20

Table : tb_detail
Nama Atribut Tipe Atribut Panjang Karakter
id_pendanaan Varchar 50
id_judul Varchar 50
jml_pendanaan Varchar 50
deskripsi_pkm Varchar 100

Table : tb_admin
Nama Atribut Tipe Atribut Panjang Karakter
id_admin Int (Auto Increment) -
username Varchar 20
email_admin Varchar 50
password Varchar 30
user_level Int (Auto Increment) -
 Table : tb_pengumuman
Nama Atribut Tipe Atribut Panjang Karakter
id_info Int (Auto Increment) -
info_pkm Varchar 100
pengumuman Varchar 500

Tahapan Pembuatan Website

Dalam pembuatan website ini tahapan awal yang dilakukan adalah mendesain (setelah
menganalisis dan memahami requirementnya). Desain yang dilakukan adalah dengan mencari
template yang sudah tersedia (free) diinternet. Kali ini website yang digunakan (html) adalah
Bootstrap. Didalam website bootstrap ini sudah tersedia tampilan default (kosongan “tanpa ada
fungsi sama sekali, sehingga tidak bisa dijalankan”), yaitu berupa form login dan home
(index.html).

Kemudian website tersebut di custom tampilannya sesuai dengan requirement.

Gambar diatas adalah gambar website bootstrap yang belum di custom

Gambar diatas adalah gambar website yang sudah di custom sesuai requirement.
Detail Website

1. Register
a. Form Register

b. Menambah Account
2. Login
a. Form Login
b. Koneksi / Konfirmasi Account
3. Home
a. Tampilan Beranda

Gambar diatas merupakan bagian tampilan title bar “KaryaITS”, sekaligus link untuk
koneksi file css (default website bootstrap berisi konten-konten css untuk tampilan web
dari vendor).
Hasil dari code diatas adalah seperti gambar dibawah ini,

b. Background

Code diatas berfungsi untuk mengambil sebuah gambar “tampilback.png” yang berada
pada folder “images” pada folder “underdog”, gambar tersebut digunakan untuk
dijadikan sebagai background dari halaman “index.html” ini.

Hasil dari code diatas adalah sebuah bacground seperti gambar dibawah ini,
c. Caption Karya ITS, Home, Hai Admin

Code diatas untuk menampilkan header/navbar, seperti gambar dibawah ini,

d. Button Logout

Code diatas digunakan untuk membuat tombol” dropdown” pada “Hai Admin” untuk
memunculkan tombol “Logout”
Hasil dari code diatas adalah seperti gambar dibawah ini,
e. Button Home, Input Data PKM, Info Terbaru Kegiatan PKM, Update Info Kegiatan PKM,
Galeri, About Us.

Code pada gambar diatas digunakan untuk membuat sebuah tombol ”button” dibagian
kiri website, sebagai menu untuk memasuki halaman sesuai dengan title tombol
tersebut, setiap tombol dilinkkan / disambungkan ke alamat php “ Home, Input Data
PKM, Info Terbaru Kegiatan PKM, Update Info Kegiatan PKM, Galeri, About Us” (index,
input, pengumuman, input5, list, about).

Code tersebut membuat tampilan seperti gambar dibawah ini,

 f. Menampilkan Logo ITS

Code diatas berfungsi untuk memanggil sebuah gambar “lambang-its.png” dari folder
images pada “underdog”.

Hasil dari code diatas adalah seperti gambar dibawah ini,

g. Caption

Code pada gambar diatas adalah untuk menampilkan sebuah caption “Website
pengarsipan Karya Tulis Ilmiah Mahasiswa yang telah didanai di Institut Teknologi
Sepuluh Nopember” pada posisi “center” rata tengah”

h. Form Pencarian
i. Button Cari
j. Caption Footer

4. Input data PKM dan Update Info

 a. Input Data Identitas Mahasiswa
b. Input Data Kategori PKM
c. Input Data Dosen Pembimbing
d. Input Data Detail PKM
e. Update Info Kegiatan PKM terbaru

5. View
a. View Hasil Inputan Data (Mahasiswa, Kategori, Dosen, Detail)
b. View Info Kegiatan PKM Terbaru
6. Galeri
a. Menampilkan Foto
b. Menampilkan Caption
7. About Us
a. Menampilkan Foto
b. Menampilkan Caption
8. Logout