CSE 3208 - Web Engineering Lab Report

HTML Personal Webpage

Headings, Images, Links & Lists

📋 Objective

Create a simple webpage using HTML with name, department, university using heading tags, images, hyperlinks, and lists.

💻 Source Code

<!DOCTYPE html>
<html>
<head><title>Lab 1 - Personal Webpage</title></head>
<body>
  <h1>Imran Hossen</h1>
  <h2>Department of Computer Science and Engineering</h2>
  <h3>Khwaja Yunus Ali University (KYAU)</h3>

  <p>Hello! I am Imran Hossen, a 3rd year CSE student...</p>

  <img src="photo1.jpg" alt="Photo" width="300" height="200">
  <img src="photo2.jpg" alt="Photo" width="300" height="200">

  <a href="https://kyau.ac.bd" target="_blank">Visit KYAU Website</a>

  <h3>My Hobbies</h3>
  <ul>
    <li>Web Development</li>
    <li>Programming</li>
    <li>Reading Books</li>
  </ul>

  <h3>Favorite Languages (Ranked)</h3>
  <ol>
    <li>PHP</li>
    <li>JavaScript</li>
    <li>Python</li>
  </ol>
</body>
</html>

📝 Discussion

This experiment demonstrates the use of HTML heading tags (h1-h3), paragraph, image tags with width/height attributes, anchor tags for hyperlinks, and ordered/unordered lists.

🔗 View Live Demo

Semantic HTML Layout

header, nav, section, aside, footer

📋 Objective

Design a complete static webpage using semantic HTML5 tags with header, navigation, main content, sidebar, and footer including tables and forms.

💻 Key Code Snippet

<header>
  <h1>KYAU Computer Club</h1>
</header>
<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
</nav>
<div class="container">
  <section>
    <h2>Welcome</h2>
    <table border="1">...</table>
    <form>...</form>
  </section>
  <aside>
    <h3>Quick Links</h3>
  </aside>
</div>
<footer>&copy; 2026 KYAU</footer>

📝 Discussion

Semantic tags like <header>, <nav>, <section>, <aside>, and <footer> improve accessibility and SEO. The page includes tables for data display and a contact form.

🔗 View Live Demo

External CSS Styling

Backgrounds, Typography, Hover Effects, Responsive

📋 Objective

Link an external CSS file to apply background gradients, custom fonts, borders, padding, margins, hover effects, and responsive media queries.

💻 Key CSS Code

/* Gradient Background */
header {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

/* Custom Typography */
.styled-text { font-family: Georgia, serif; font-size: 20px; }

/* Hover Effect */
.hover-link:hover {
  transform: scale(1.15);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

/* Responsive Media Query */
@media screen and (max-width: 768px) {
  nav a { display: block; width: 80%; }
  .link-container { flex-direction: column; }
}

📝 Discussion

External CSS separates styling from structure. We used gradients, custom fonts, CSS box model properties, transition-based hover effects, and media queries for mobile responsiveness.

🔗 View Live Demo

CSS Color Formats

RGB, HEX, and HSL

📋 Objective

Develop a webpage using div elements to demonstrate RGB, HEX, and HSL color formats with proper labeling.

💻 Key Code

/* RGB Color */
.rgb-box { background-color: rgb(52, 152, 219); }

/* HEX Color */
.hex-box { background-color: #e74c3c; }

/* HSL Color */
.hsl-box { background-color: hsl(145, 63%, 49%); }

📝 Discussion

RGB uses red/green/blue values (0-255), HEX uses hexadecimal notation (#RRGGBB), and HSL uses hue (0-360°), saturation, and lightness percentages. All three produce the same visual results but offer different approaches to color specification.

🔗 View Live Demo

JavaScript Alert

onclick Event Handler

📋 Objective

Create a webpage with buttons that trigger alert messages when clicked using JavaScript's onclick event handler.

💻 Source Code

<button onclick="alert('Hello! Welcome to Web Engineering Lab.')">
  Say Hello
</button>

<button onclick="alert('Time: ' + new Date().toLocaleString())">
  Show Time
</button>

<button onclick="showRandomFact()">Random Fact</button>

<script>
function showRandomFact() {
  var facts = [
    "JavaScript was created in just 10 days!",
    "The first website is still online at info.cern.ch",
    "Over 97% of websites use JavaScript."
  ];
  var i = Math.floor(Math.random() * facts.length);
  alert("Fun Fact: " + facts[i]);
}
</script>

📝 Discussion

The onclick event handler allows JavaScript to respond to user clicks. The alert() function displays a dialog box with a message. We demonstrated both inline and function-based event handling.

🔗 View Live Demo

Simple Calculator

HTML + JavaScript

📋 Objective

Develop a calculator with two input fields, four operation buttons (+, −, ×, ÷), and a result display area using JavaScript.

💻 Key JavaScript

function calculate(operator) {
  var num1 = parseFloat(document.getElementById('num1').value);
  var num2 = parseFloat(document.getElementById('num2').value);
  var result;

  if (isNaN(num1) || isNaN(num2)) {
    document.getElementById('result').textContent = 'Enter both numbers!';
    return;
  }

  switch (operator) {
    case '+': result = num1 + num2; break;
    case '-': result = num1 - num2; break;
    case '*': result = num1 * num2; break;
    case '/':
      if (num2 === 0) { alert('Cannot divide by zero!'); return; }
      result = num1 / num2; break;
  }

  document.getElementById('result').textContent =
    num1 + ' ' + operator + ' ' + num2 + ' = ' + result;
}

📝 Discussion

This calculator demonstrates DOM manipulation with getElementById(), parseFloat() for number conversion, switch-case for operation selection, and division-by-zero error handling.

🔗 View Live Demo

Dynamic Title Changer

DOM Manipulation

📋 Objective

Build a page where users can type a custom title and dynamically update the browser tab title using JavaScript DOM manipulation.

💻 Source Code

<input type="text" id="titleInput" placeholder="Enter new title...">
<button onclick="changeTitle()">Change Title</button>

<script>
var originalTitle = document.title;

function changeTitle() {
  var newTitle = document.getElementById('titleInput').value.trim();
  if (newTitle === '') {
    alert('Please enter a title first!');
    return;
  }
  // DOM Manipulation — changing the <title> tag
  document.title = newTitle;
  document.getElementById('currentTitle').textContent = newTitle;
}

function resetTitle() {
  document.title = originalTitle;
}
</script>

📝 Discussion

document.title provides direct access to the <title> element in the DOM. This experiment shows how JavaScript can dynamically modify HTML metadata in real-time without page reload.

🔗 View Live Demo

PHP + MySQL Registration

📋 Objective

Create a registration form (register.html) that submits to a PHP script (register.php) which connects to MySQL, inserts data into a students table, and displays success/error message.

💻 register.php — Key Code

<?php
$host = "localhost";
$username = "root";
$password = "";
$database = "lab_report_db";

// Connect to MySQL
$conn = new mysqli($host, $username, $password);
$conn->query("CREATE DATABASE IF NOT EXISTS $database");
$conn->select_db($database);

// Create table
$conn->query("CREATE TABLE IF NOT EXISTS students (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100) NOT NULL,
  roll VARCHAR(50) NOT NULL,
  department VARCHAR(100) NOT NULL,
  email VARCHAR(100) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
)");

// Insert data from form
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = $conn->real_escape_string($_POST['name']);
  $roll = $conn->real_escape_string($_POST['roll']);
  $dept = $conn->real_escape_string($_POST['department']);
  $email = $conn->real_escape_string($_POST['email']);

  $sql = "INSERT INTO students (name, roll, department, email)
          VALUES ('$name','$roll','$dept','$email')";

  if ($conn->query($sql) === TRUE) {
    echo "Registration successful!";
  } else {
    echo "Error: " . $conn->error;
  }
}
$conn->close();
?>

📝 Discussion

This experiment demonstrates PHP-MySQL integration: connecting with mysqli, creating database/table programmatically, processing POST form data, escaping input for security, and providing user feedback.

🔗 View Registration Form

View Students (PHP + MySQL)

Fetch & Display in HTML Table

📋 Objective

Write a PHP script (view_students.php) that connects to the database, fetches all student records, and displays them in an HTML table with columns: ID, Name, Roll, Department, Email.

💻 view_students.php — Key Code

<?php
$conn = new mysqli("localhost", "root", "", "lab_report_db");

$sql = "SELECT id, name, roll, department, email
        FROM students ORDER BY id DESC";
$result = $conn->query($sql);
?>

<table>
  <thead>
    <tr>
      <th>ID</th><th>Name</th><th>Roll</th>
      <th>Department</th><th>Email</th>
    </tr>
  </thead>
  <tbody>
    <?php while ($row = $result->fetch_assoc()): ?>
    <tr>
      <td><?= $row['id'] ?></td>
      <td><?= htmlspecialchars($row['name']) ?></td>
      <td><?= htmlspecialchars($row['roll']) ?></td>
      <td><?= htmlspecialchars($row['department']) ?></td>
      <td><?= htmlspecialchars($row['email']) ?></td>
    </tr>
    <?php endwhile; ?>
  </tbody>
</table>

<?php $conn->close(); ?>

📝 Discussion

This script uses mysqli to query the database, fetch_assoc() to iterate results, and htmlspecialchars() to prevent XSS attacks when displaying user data. The ORDER BY DESC shows newest records first.

🔗 View Students Table