Lab Report - Customer Records Page

1. customer.aspx (Frontend Page)

This is the main UI page which displays the top 5 customer records from the database using a GridView control. It includes styling and layout using CSS.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Customer.aspx.vb" Inherits="Customer" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Customer Records</title>
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f1f3f6;
            margin: 0;
            padding: 0;
            color: #333;
        }

        header {
            background-color: #ff7043;
            color: white;
            padding: 20px;
            text-align: center;
            font-size: 28px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 40px auto;
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
        }

        th {
            background-color: #ffccbc;
            color: #ff7043;
            font-weight: 500;
        }

        td {
            background-color: #fafafa;
        }

        tr:nth-child(even) td {
            background-color: #f5f5f5;
        }

        .gridview th, .gridview td {
            border: 1px solid #e0e0e0;
        }

        .gridview th {
            background-color: #ffccbc;
            color: #ff7043;
        }

        .gridview td {
            background-color: #fafafa;
        }

        .gridview tr:nth-child(even) td {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <header>Customer Records</header>
        <div class="container">
            <h2>First 5 Customers</h2>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true" CssClass="gridview" />
        </div>
    </form>
</body>
</html>

2. customer.aspx.vb (Backend VB.NET Code)

This file contains VB.NET code to connect with SQL Server, fetch top 5 customer records, and bind them to GridView when the page loads.

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Partial Class Customer
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            LoadCustomers()
        End If
    End Sub

    Private Sub LoadCustomers()
        ' Get connection string from Web.config
        Dim connStr As String = "Data Source=DESKTOP-3453453;Initial Catalog=Food-Management-System;Integrated Security=True"
        Dim query As String = "SELECT TOP 5 * FROM Customer"

        Using conn As New SqlConnection(connStr),
              da As New SqlDataAdapter(query, conn)

            Dim dt As New DataTable()
            da.Fill(dt)
            GridView1.DataSource = dt
            GridView1.DataBind()
        End Using
    End Sub
End Class