Pertemuan 13 - Profile Pegawai

Tujuan Praktikum

Setelah praktikum ini, mahasiswa mampu:

Menambahkan menu Profile untuk role pegawai.
Membuat ProfileServlet untuk menampilkan data profile pegawai yang sedang login.
Menampilkan halaman profile.jsp berbasis data session user dan data pegawai.
Menghubungkan halaman profile dengan sidebar dan dashboard pegawai.

Persiapan

Siapkan kebutuhan berikut:

- Project Java Web Starter
- Folder `src/java/controller`
- Folder `src/java/dao`
- Folder `src/java/model`
- Folder `web/WEB-INF/views`
- File `src/java/model/User.java`
- File `src/java/dao/UserDAO.java`
- File `src/java/dao/PegawaiDAO.java`
- File `web/WEB-INF/views/partials/sidebar.jsp`
- File `web/WEB-INF/views/home.jsp`
- File `web/index.jsp`

Konsep Singkat

Menu Profile dipakai oleh user dengan role pegawai untuk melihat identitas dirinya sendiri setelah login.

Alurnya seperti ini:

Sidebar Pegawai
   -> /profile
      -> ProfileServlet.java
         -> PegawaiDAO.java
         -> profile.jsp

Menu ini bergantung pada:

user sudah login,
role user adalah pegawai,
akun user terhubung ke id_pegawai.

Karena itu, materi Profile lebih tepat diletakkan setelah CRUD Manajemen User dan setelah Presensi Pegawai sudah dikenalkan.

Struktur File yang Dibutuhkan

src/java/controller/ProfileServlet.java
web/WEB-INF/views/profile.jsp
web/WEB-INF/views/partials/sidebar.jsp
src/java/dao/PegawaiDAO.java
src/java/model/Pegawai.java
src/java/model/User.java
web/index.jsp

Buka file web/WEB-INF/views/partials/sidebar.jsp.

Untuk role pegawai, pastikan menu berikut tersedia:

<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<nav id="sidebar">
    <ul>
        <li class="${requestScope.activeMenu == 'home' ? 'active' : ''}">
            <a href="${pageContext.request.contextPath}/dashboard">
                Home
            </a>
        </li>

        <c:choose>
            <c:when test="${sessionScope.userLogin.role == 'pegawai'}">
                <li class="${requestScope.activeMenu == 'profile' ? 'active' : ''}">
                    <a href="${pageContext.request.contextPath}/profile">
                        Profile
                    </a>
                </li>

                <li class="${requestScope.activeMenu == 'presensi' ? 'active' : ''}">
                    <a href="${pageContext.request.contextPath}/presensi">
                        Presensi
                    </a>
                </li>
            </c:when>

            <c:otherwise>
                <li class="${requestScope.activeMenu == 'bagian' ? 'active' : ''}">
                    <a href="${pageContext.request.contextPath}/bagian">
                        Entry Data Bagian
                    </a>
                </li>

                <li class="${requestScope.activeMenu == 'pegawai' ? 'active' : ''}">
                    <a href="${pageContext.request.contextPath}/pegawai">
                        Entry Data Pegawai
                    </a>
                </li>

                <li class="${requestScope.activeMenu == 'users' ? 'active' : ''}">
                    <a href="${pageContext.request.contextPath}/users">
                        Manajemen User
                    </a>
                </li>
            </c:otherwise>
        </c:choose>
    </ul>
</nav>

Dengan ini, user pegawai akan melihat menu Home, Profile, dan Presensi.

Langkah 2 - Buat Servlet Profile

Buat file src/java/controller/ProfileServlet.java.

Servlet ini bertugas:

membaca user login dari session,
memastikan user adalah pegawai,
mengambil data pegawai dari database,
menampilkan halaman profile.

Struktur sederhananya seperti ini:

package controller;

import dao.PegawaiDAO;
import model.Pegawai;
import model.User;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;

import java.io.IOException;
import java.sql.SQLException;

@WebServlet(name = "ProfileServlet", urlPatterns = {"/profile"})
public class ProfileServlet extends HttpServlet {

    private static final String PROFILE_PAGE = "/WEB-INF/views/profile.jsp";

    private final PegawaiDAO pegawaiDAO = new PegawaiDAO();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        User user = getUserLogin(request);
        if (user == null || user.getPegawaiId() == null) {
            request.setAttribute("activeMenu", "profile");
            request.setAttribute("message", "User ini belum terhubung ke data pegawai.");
            forwardToLayout(request, response);
            return;
        }

        try {
            Pegawai pegawai = pegawaiDAO.findById(user.getPegawaiId());
            request.setAttribute("activeMenu", "profile");
            request.setAttribute("pegawai", pegawai);
            forwardToLayout(request, response);
        } catch (SQLException e) {
            throw new ServletException("Gagal mengambil data profile.", e);
        }
    }

    private User getUserLogin(HttpServletRequest request) {
        HttpSession session = request.getSession(false);
        if (session == null) {
            return null;
        }

        Object user = session.getAttribute("userLogin");
        return user instanceof User ? (User) user : null;
    }

    private void forwardToLayout(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setAttribute("contentPage", PROFILE_PAGE);
        request.getRequestDispatcher("/index.jsp").forward(request, response);
    }
}

Langkah 3 - Buat Halaman JSP Profile

Buat file web/WEB-INF/views/profile.jsp.

Halaman ini menampilkan data pegawai yang sedang login.

<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<div class="page-header">
    <h2>Profile</h2>
</div>

<c:if test="${not empty message}">
    <div class="info"><c:out value="${message}"/></div>
</c:if>

<c:if test="${not empty pegawai}">
    <div class="card">
        <h3><c:out value="${pegawai.namaPegawai}"/></h3>
        <div class="detail-grid">
            <div>
                <span>NIP / ID Pegawai</span>
                <strong><c:out value="${pegawai.nip}"/></strong>
            </div>
            <div>
                <span>Jenis Kelamin</span>
                <strong>
                    <c:choose>
                        <c:when test="${pegawai.jenisKelamin == 'L'}">Laki-laki</c:when>
                        <c:when test="${pegawai.jenisKelamin == 'P'}">Perempuan</c:when>
                        <c:otherwise><c:out value="${pegawai.jenisKelamin}"/></c:otherwise>
                    </c:choose>
                </strong>
            </div>
            <div>
                <span>No HP</span>
                <strong><c:out value="${pegawai.noHp}" default="-"/></strong>
            </div>
            <div>
                <span>Bagian</span>
                <strong><c:out value="${pegawai.bagianNama}"/></strong>
            </div>
            <div>
                <span>Status Pegawai</span>
                <strong><c:out value="${pegawai.statusPegawai}"/></strong>
            </div>
            <div>
                <span>Alamat</span>
                <strong><c:out value="${pegawai.alamat}" default="-"/></strong>
            </div>
        </div>
    </div>
</c:if>

Langkah 4 - Hubungkan dari Home dan Dashboard

Agar menu ini terasa terintegrasi, pastikan ada shortcut ke Profile dari area pegawai.

Pada home.jsp atau dashboard pegawai, gunakan file seperti ini:

<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<div class="page-header">
    <h2>Dashboard</h2>
</div>

<div class="card">
    <h3>
        Selamat datang,
        <c:choose>
            <c:when test="${not empty sessionScope.userLogin.namaPegawai}">
                <c:out value="${sessionScope.userLogin.namaPegawai}"/>
            </c:when>
            <c:otherwise>
                <c:out value="${sessionScope.userLogin.username}"/>
            </c:otherwise>
        </c:choose>
    </h3>

    <c:choose>
        <c:when test="${sessionScope.userLogin.role == 'pegawai'}">
            <p>Dashboard pegawai menampilkan akses cepat ke profile dan presensi.</p>
            <div class="quick-actions">
                <a href="${pageContext.request.contextPath}/profile" class="btn btn-secondary">Profile</a>
                <a href="${pageContext.request.contextPath}/presensi" class="btn btn-add">Presensi</a>
            </div>
        </c:when>
        <c:otherwise>
            <p>Ini adalah dashboard admin untuk mengelola data bagian, pegawai, dan user.</p>
        </c:otherwise>
    </c:choose>
</div>

Dengan begitu, profile menjadi salah satu fitur utama pegawai setelah login.

Pengujian

Lakukan pengujian berikut:

Login sebagai user role pegawai.
Pastikan menu Profile muncul di sidebar.
Klik menu Profile.
Pastikan data pegawai yang tampil sesuai akun login.
Pastikan user admin tidak memakai halaman profile pegawai ini sebagai menu utama.

Checklist hasil yang diharapkan:

- Menu Profile muncul untuk pegawai
- Halaman profile bisa dibuka
- Data pegawai sesuai akun login
- Role admin tidak memakai alur profile pegawai

Troubleshooting

Masalah	Penyebab	Solusi
Menu Profile tidak muncul	Role user bukan `pegawai`	Cek nilai `role` pada tabel `users`
Halaman profile redirect ke index	User belum login atau `id_pegawai` kosong	Pastikan relasi user ke pegawai sudah benar
Data profile kosong	Data pegawai tidak ditemukan	Cek `id_pegawai` pada user dan isi tabel `pegawai`
Bagian tidak tampil	Relasi pegawai ke bagian belum lengkap	Cek data `id_bagian` dan query DAO

Tugas Praktikum

Tambahkan foto profile pegawai pada halaman profile.
Tambahkan tombol ubah password dari halaman profile.
Tambahkan fitur edit nomor HP dan alamat secara mandiri untuk role pegawai.

Kesimpulan

Pada pertemuan ini, menu Profile Pegawai dibuat agar user role pegawai dapat melihat identitas dirinya sendiri setelah login.

Fitur ini melengkapi alur personal pegawai bersama menu Presensi, dan menjadi dasar sebelum masuk ke materi Dashboard User yang merangkum kedua fitur tersebut.