Alip Anwar Watch on YouTube

2. DESAIN HALAMAN LOGIN DAN HALAMAN ADMIN - APLIKASI PEMBAYARAN SPP UKK RPL 2023

3 min read 3 hours ago

Published on May 01, 2026 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial focuses on designing a login page and an admin page for a payment application, specifically for school fees (SPP) in the context of the 2023 RPL UKK project. By following these steps, you will gain practical insights into creating functional and user-friendly interfaces that are essential for managing payments in educational settings.

Step 1: Setting Up Your Development Environment

Choose a code editor (e.g., Visual Studio Code, Sublime Text).
Ensure you have a web server environment (e.g., XAMPP, WAMP) for local development.
Create a new project directory for your application.

Step 2: Designing the Login Page

Create a new HTML file named login.html.
Structure the login page using HTML elements:
- Use a <form> element to capture user input.
- Include input fields for username and password.
- Add a submit button to log in.

Example Code for the Login Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
</head>
<body>
    <h2>Login to SPP Application</h2>
    <form action="admin.html" method="POST">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        
        <button type="submit">Login</button>
    </form>
</body>
</html>

Step 3: Creating the Admin Page

Create a new HTML file named admin.html.
Design the admin page layout:
- Include a header with the title "Admin Dashboard".
- Add navigation links to various sections like User Management, Payment History, and Reports.

Example Code for the Admin Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard</title>
</head>
<body>
    <h2>Admin Dashboard</h2>
    <nav>
        <ul>
            <li><a href="user_management.html">User Management</a></li>
            <li><a href="payment_history.html">Payment History</a></li>
            <li><a href="reports.html">Reports</a></li>
        </ul>
    </nav>
</body>
</html>

Step 4: Implementing Basic CSS for Styling

Create a new CSS file named styles.css.
Link this CSS file in both login.html and admin.html.

Basic Styling Example

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

h2 {
    color: #333;
}

form {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

Step 5: Testing Functionality

Open login.html in your browser.
Enter a test username and password to simulate a login.
Ensure that upon submission, you are directed to the admin.html page.

Step 6: Planning for Future Enhancements

Consider adding features such as:
- Password recovery options.
- User role management for different access levels.
- Integration with a database for storing user credentials and transaction history.

Conclusion

In this tutorial, you learned how to create a basic login page and an admin dashboard for a payment application. You set up your development environment, designed user interfaces, and implemented basic styling. As a next step, consider enhancing your application with more features and testing its functionality thoroughly to ensure a seamless user experience.

Table of Contents

Recent