Programming Assignment

Build a Web application with HTML, CSS, JavaScript, jQuery and PHP for online application/registration form. Form should accept the information and print/display on a browser with formatting/styling upon submission (Button click) on success. Host the application on a cloud platform.

Part 1: Application Code

1. Folder Structure

Create a folder named registration_app with the following structure:

registration_app/
│
├── index.html          // Main HTML form
├── styles.css          // CSS for styling
├── script.js           // Optional JavaScript/jQuery functionality
├── process.php         // PHP to handle form submission
├── README.md           // Optional file to describe the project

2. HTML Form (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>Online Registration Form</h1>
        <form id="registrationForm" method="POST" action="process.php">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>
            
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
            
            <label for="phone">Phone:</label>
            <input type="tel" id="phone" name="phone" required>
            
            <label for="dob">Date of Birth:</label>
            <input type="date" id="dob" name="dob" required>
            
            <label for="gender">Gender:</label>
            <select id="gender" name="gender" required>
                <option value="">Select</option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
                <option value="Other">Other</option>
            </select>
            
            <button type="submit">Submit</button>
        </form>
    </div>
</body>
</html>

3. CSS Styling (styles.css)

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

.container {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #007BFF;
}

form label {
    display: block;
    margin: 10px 0 5px;
    font-weight: bold;
}

form input, form select, form button {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

form button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    cursor: pointer;
}

form button:hover {
    background-color: #0056b3;
}

4. JavaScript (script.js)

$(document).ready(function () {
    // Optional: Add client-side validation or interactivity
    $('#registrationForm').on('submit', function (e) {
        if (!$('#name').val()) {
            alert('Please enter your name!');
            e.preventDefault();
        }
    });
});

5. PHP Processing (process.php)

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name = htmlspecialchars($_POST['name']);
    $email = htmlspecialchars($_POST['email']);
    $phone = htmlspecialchars($_POST['phone']);
    $dob = htmlspecialchars($_POST['dob']);
    $gender = htmlspecialchars($_POST['gender']);
    
    echo "
        <div style='font-family: Arial, sans-serif; max-width: 600px; margin: 50px auto; padding: 20px; background: #f9f9f9; border-radius: 5px;'>
            <h1>Registration Successful</h1>
            <p><strong>Name:</strong> $name</p>
            <p><strong>Email:</strong> $email</p>
            <p><strong>Phone:</strong> $phone</p>
            <p><strong>Date of Birth:</strong> $dob</p>
            <p><strong>Gender:</strong> $gender</p>
        </div>
    ";
}
?>

Part 2: Hosting the Web Application

1. Using XAMPP (Local Testing)

Download and install XAMPP.
Place the project folder in htdocs (e.g., C:\xampp\htdocs\registration_app).
Start Apache and MySQL from the XAMPP control panel.
Open a browser and navigate to http://localhost/registration_app/index.html.

2. Hosting on a Cloud Platform

Option A: Hosting on GitHub + Free PHP Hosting (000webhost)

Upload to GitHub:

Initialize Git in your folder:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/yourusername/registration_app.git
git push -u origin main

Host on 000webhost:
- Sign up at 000webhost.
- Create a new website and upload the project files through the file manager.
Test the Application:
- Your application will be accessible via the provided 000webhost URL.

Option B: Hosting on Heroku (Advanced)

Install Heroku CLI:
- Download and install Heroku CLI.
Add a composer.json (for PHP recognition): Create a file named composer.json in your project folder:
```
{
    "require": {
        "php": "^7.4 || ^8.0"
    }
}
```

Deploy to Heroku:

Initialize Git in your folder and deploy:

git init
git add .
git commit -m "Initial commit"
heroku create
git push heroku main

Access Your Application:

Visit the URL provided by Heroku after deployment.

-:END:-

Comments

Jack HenryOctober 16, 2025 at 2:50 PM
Great post on Programming Assignment - 2! I recently faced similar challenges while working on my coding tasks, especially when trying to implement complex logic and test various scenarios. For anyone struggling, seeking simulation assignment help can be a real lifesaver. It provides guidance on structuring your code, understanding algorithms, and debugging efficiently. I found that breaking the assignment into smaller modules and testing each part individually really helped improve both accuracy and efficiency. Thanks for sharing these insights—it’s reassuring to know that support and resources are available for students trying to manage programming assignments successfully.

Search This Blog

Web Technology Lab by Dr. G Anil Kumar

Programming Assignment - 2