This tutorial will guide you in creating a lawyer’s front page using Bootstrap for design, PHP for backend processing, and MySQL for data storage. This page will include sections such as About, Services, Testimonials, and Contact.
1. Prerequisites
Before we start, make sure you have:
✅ XAMPP (or any local server installed)
✅ Basic knowledge of HTML, CSS, PHP, and MySQL
✅ A code editor (VS Code, Sublime Text, or Notepad++)
2. Setting Up the Project
Step 1: Create a Project Folder
- Go to your XAMPP/htdocs/ directory.
- Create a folder named lawyer_website.
Step 2: Start XAMPP
- Open XAMPP Control Panel.
- Start Apache and MySQL.
3. Creating the Database
Step 1: Open phpMyAdmin
- Go to http://localhost/phpmyadmin/.
- Click Databases and create a new database called lawyer_db.
Step 2: Create Tables
Run the following SQL queries in phpMyAdmin:
Table for Testimonials
CREATE TABLE testimonials (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
feedback TEXT NOT NULL,
rating INT NOT NULL CHECK (rating BETWEEN 1 AND 5)
);
Table for Contact Messages
CREATE TABLE contact (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL,
message TEXT NOT NULL
);
4. Designing the Front Page with Bootstrap
Step 1: Create index.php
Inside the lawyer_website folder, create a file named index.php and add the following Bootstrap-based template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Law Firm</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Law Firm</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#testimonials">Testimonials</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="bg-primary text-white text-center py-5">
<h1>Experienced Legal Solutions</h1>
<p>Protecting Your Rights with Expertise</p>
</header>
<!-- About Section -->
<div class="container my-5" id="about">
<h2 class="text-center">About Us</h2>
<p class="text-center">We are a dedicated law firm with years of experience in handling legal matters professionally.</p>
</div>
<!-- Services Section -->
<div class="container my-5" id="services">
<h2 class="text-center">Our Services</h2>
<div class="row">
<div class="col-md-4">
<h4>Criminal Law</h4>
<p>We defend clients in legal cases ensuring justice is served.</p>
</div>
<div class="col-md-4">
<h4>Family Law</h4>
<p>Expert legal support in divorce, custody, and family-related matters.</p>
</div>
<div class="col-md-4">
<h4>Corporate Law</h4>
<p>Legal guidance for businesses, contracts, and corporate compliance.</p>
</div>
</div>
</div>
<!-- Testimonials Section -->
<div class="container my-5" id="testimonials">
<h2 class="text-center">Client Testimonials</h2>
<div class="row">
<?php
include 'config.php';
$query = "SELECT * FROM testimonials ORDER BY id DESC LIMIT 3";
$result = mysqli_query($conn, $query);
while ($row = mysqli_fetch_assoc($result)) {
echo '<div class="col-md-4">';
echo '<div class="card p-3 mb-3">';
echo '<h5>' . $row['name'] . '</h5>';
echo '<p>"' . $row['feedback'] . '"</p>';
echo '<p>⭐ ' . $row['rating'] . '/5</p>';
echo '</div>';
echo '</div>';
}
?>
</div>
</div>
<!-- Contact Section -->
<div class="container my-5" id="contact">
<h2 class="text-center">Contact Us</h2>
<form action="contact.php" method="POST">
<div class="mb-3">
<label class="form-label">Name</label>
<input type="text" name="name" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" name="email" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Message</label>
<textarea name="message" class="form-control" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>
<!-- Footer -->
<footer class="bg-dark text-white text-center py-3">
<p>© <?php echo date("Y"); ?> Law Firm</p>
</footer>
</body>
</html>
5. Connecting PHP to MySQL
Step 1: Create config.php
Create config.php in lawyer_website to handle database connections:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "lawyer_db";
$conn = mysqli_connect($servername, $username, $password, $database);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>
6. Handling Contact Form Submissions
Create a file contact.php to store messages in the database:
<?php
include 'config.php';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
$query = "INSERT INTO contact (name, email, message) VALUES ('$name', '$email', '$message')";
if (mysqli_query($conn, $query)) {
echo "Message sent successfully!";
} else {
echo "Error: " . mysqli_error($conn);
}
}
?>
Conclusion
Now you have a fully functional lawyer website front page with Bootstrap styling, PHP backend, and MySQL storage for testimonials and contact messages.
🚀 To improve:
✅ Add user authentication for an admin panel.
✅ Implement dynamic blog posts.
✅ Enhance styling for a more professional look.