Free Monthly Budget Spreadsheet (UK-Friendly)

👨‍💻 Helping Kai Build His First Front-End App

It’s been a few weeks since my last post with Kai. We’ve been heads-down coding together, and instead of just talking about database security, we started building a working front end for his application. This has been a big step for Kai — going from SQL tables and stored procedures to actually seeing his app come alive in the browser.

We used C# with ASP.NET Web Forms (ASPX) to create login and home pages, and then expanded into pages for courses, students, lectures, grades, and even a small library system.

---

 

 

🔑 Step 1: Building the Login Page

Before you can get into the app, you need a secure login. We reused our earlier hashed + salted password system but wrapped it with an ASPX login form.

<asp:TextBox ID="txtUsername" runat="server" Placeholder="Username"></asp:TextBox>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Placeholder="Password"></asp:TextBox>
<asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />
<asp:Label ID="lblMessage" runat="server" ForeColor="Red"></asp:Label>

And in the code-behind (Login.aspx.cs):

protected void btnLogin_Click(object sender, EventArgs e)
{
    if (AuthService.ValidateLogin(txtUsername.Text, txtPassword.Text))
    {
        Response.Redirect("Home.aspx");
    }
    else
    {
        lblMessage.Text = "Invalid username or password.";
    }
}

---

🏠 Step 2: Creating the Home Page

Once Kai got his first successful login, we built a Home.aspx page. This is like a dashboard, with links to different modules.

<ul>
  <li><a href="Courses.aspx">📘 Courses</a></li>
  <li><a href="Students.aspx">🎓 Students</a></li>
  <li><a href="Lectures.aspx">📖 Lectures</a></li>
  <li><a href="Grades.aspx">📝 Grades</a></li>
  <li><a href="Library.aspx">📚 Library</a></li>
</ul>

Kai loved the idea of a "hub" where he can branch into each section.

---

📂 Step 3: Adding Content Pages

Over the last few weeks, we’ve been building out the actual modules:

• 📘 Courses.aspx → lets him add, edit, and delete courses.
• 🎓 Students.aspx → simple form to register new students.
• 📖 Lectures.aspx → keep track of lecture schedules.
• 📝 Grades.aspx → teachers can enter student grades.
• 📚 Library.aspx → a mini system for borrowing and returning books.

For example, here’s a snippet from the Students.aspx form:

<asp:TextBox ID="txtStudentName" runat="server" Placeholder="Student Name"></asp:TextBox>
<asp:TextBox ID="txtEmail" runat="server" Placeholder="Email"></asp:TextBox>
<asp:Button ID="btnAddStudent" runat="server" Text="Add Student" OnClick="btnAddStudent_Click" />

And the backend in C#:

protected void btnAddStudent_Click(object sender, EventArgs e)
{
    StudentService.AddStudent(txtStudentName.Text, txtEmail.Text);
    lblMessage.Text = "Student added successfully!";
}

---

🧠 Step 4: What Kai Learned

Throughout this, Kai got to see how front end and back end connect

:

• 💻 ASPX pages handle input and display.
• ⚙️ C# code-behind calls services or stored procedures.
• 🗄️ SQL database stores the secure, validated data.

He also started to see why security matters at every step, not just in the database.

---

✨ Final Thoughts

It’s been a rewarding few weeks — Kai’s app now has real screens, real data, and a proper login system. Next, we’ll polish the design and maybe add search and reporting features.

Kai: “Seeing my login work for the first time made it feel real. It’s not just code anymore, it’s my own app!”

Thanks for reading!
— Terry Jago