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:-

Search This Blog

Web Technology Lab by Dr. G Anil Kumar

Why to study Web Technology ?

Programming Assignment - 2