Project Spesification: New Student Registration

To make life easier for everyone who wants to be a new student, I decided to build a New Student Registration System. It's a simple web app that moves the whole process online.

No more messy papers, lost documents, or long queues at the registration desk.

Everything can now be done from a laptop or even a phone.

The Idea

The goal is straightforward:

Make student registration faster, smarter, and completely online while keeping it easy for both students and the school staff to use.

Students can register, upload their files, pay the registration fee, and see their admission results all in one place.

Meanwhile, the admin team can check data, verify documents, and update results instantly from their dashboard.

How It Works

The website is built with HTML, CSS, and JavaScript for the front side (the part users see),

and PHP with MySQL for the back side (where all the data and logic live).

Everything runs on MAMP, so it’s easy to develop and test locally before uploading to a real server.

Front End 

The front end is all about giving students a clean and simple experience.

Here’s what it includes:

  • A homepage that introduces SMK Coding, explains how registration works, and lists the important dates.

  • A registration form where students fill in their personal info, choose their major, and upload required documents.

  • A dashboard that lets students check their registration progress, payment status, and final results.

  • A responsive layout, so it looks great on both computers and phones.

  • Some JavaScript magic to check for errors before the form is even submitted.

Back End

On the admin side, PHP and MySQL do all the heavy lifting:

  • Admins can log in to their dashboard and see all student data in one place.

  • They can verify uploaded documents, approve or reject applications, and track payments.

  • The system can send email notifications automatically using PHP Mailer, so students know when their status changes.

  • All data is safely stored in a MySQL database, managed through MAMP during development.

  • There are also reports and statistics, so the school can see how many students applied, how many paid, and how many were accepted.

 Security & Authentication

Even though the system is simple, security still matters.

It uses PHP sessions for login, and passwords are encrypted using password_hash().

Different roles (Admin, Staff, Student) get different access levels,

and every input is checked to prevent SQL Injection or XSS attacks.

Extra Features

To make it feel more complete:

  • There’s a manual or API-based payment confirmation system (like Midtrans if integrated later).

  • Email notifications are sent automatically when registration or verification is complete.

  • File uploads are handled using native PHP functions.

 The Development Plan

Here’s roughly how the work goes:

  1. Planning & Requirements (1 week): figuring out what users actually need.

  2. Design (1 week): sketching the interface and database structure.

  3. Front End (2 weeks): building pages with HTML, CSS, and JS.

  4. Back End (3 weeks): coding PHP logic, database connections, and authentication.

  5. Testing (1 week): running it locally in MAMP, fixing bugs, and checking the flow.

  6. Deployment (1 week): preparing it for hosting or demo presentation.

What It Can Do

Once finished, SMK Coding’s New Student Registration System can:

  • Let students register online anytime.

  • Handle payments and document uploads automatically.

  • Give admins full control to manage data efficiently.

  • Send emails and update status in real-time.

  • Run smoothly on MAMP during development and easily move to a live server later.

Tech Stack

Part

Technology Used

Front End

    HTML, CSS, JavaScript

Back End

    PHP

Database

    MySQL

Local Server

    MAMP

Authentication

    PHP Sessions, password_hash()

Email Notifications

    PHP Mailer

Goal

By the end of this project, SMK Coding will have a clean, working web system that replaces manual registration with a smooth online experience.

Students can sign up with just a few clicks, and the school can manage everything from one dashboard.

It’s simple, practical, and a big step toward making school admissions more digital-friendly. 


Comments

Post a Comment

Popular posts from this blog

Typewriting Speed for Coders

Image
      As coders, t ypewriting is one of the main basis. We rely on the ability to type fast and accurately, since writing is our primary tool for building projects. The faster and more accurately we can type, the smoother our workflow becomes.       In order to enhance my typewriting skills especially the speed and accuracy, i tried many times testing my typing speed. At first, it wasn't fast enough for me because as far as i know, the average to become a fast typewriters we need to reach 60 wpm (words per minute), minimum. However, my first attempt was 57 wpm, it's so close though 😅.      Actually, many speed typewriters use all their fingers to be a speedster in typewriting.  In short, i have been striving to get above 60 wpm and i did it, eventually. Though I reached that speed with only using.. i think eight fingers, i didn't use my pinkies. So i can tell my achievement is not that enormous, therefore I have ambitions to escala...
Read more

Building Profile Page with HTML

Image
      I n this lesson, i learned about HTML. There are lots of HTML tags out there however in this lesson i learned 8 new tags. Below are the tags i learned. Heading Paragraph List Link (Hyperlink) Image Table Form      With those tags, i built a simple profile page with just using HTML. With only using HTML, i know the page will look a bit stiff. Actually, if you want to make it nifty, you need to apply the style with CSS. Though in this lesson i only got subjected only using HTML. So, below is my shot of profile page with only using HTML.     See, the page looks a bit stiff and the alignment only to the left of the screen.  Actually i already learned about CSS before, therefore in order to make it nifty, i arranged myself to style it with simple CSS.      Here's what it looks like with CSS. You can check out the code through my github:  https://github.com/farrasnazhif/profile-page-html.git
Read more

Backend Introduction with PHP

Image
     Finally I've accomplished my frontend journey. It was a pithy journey and i learned a lot of new experiences during that. However, that is not the end of the journey. In web development, theres two main parts: frontend and backend development. The frontend is the part of the application that users directly interact with. It focuses on User Interface (UI) and User Experience (UX). There is a lot of tech stack you can use in frontend development, though the main stack that people usually use is HTML, JavaScript, and CSS; that's the core of frontend development.  On the other hand, in order to make a fully functional application, you need to integrate with backend but it's all fine if you want to make an application just with frontend; for example, blog and portfolio website.  Backend role is to manage server, databases, and application logic. It ensures that when a user submits a form, logs in, or requests data, the server processes that data requests correct...
Read more