Linktree Clone Introduction
If you have ever used the Linktree web application to manage social media links (found at https://linktr.ee/), you already understand the value of a centralized link-sharing hub. This guide will show you how to build your own version using Core PHP and SQLite. We will develop the project from scratch, focusing on a straightforward, beginner-friendly approach.
By the end of this article, you will have your personal Linktree Clone covering the following features:
- Personalized Profile: Showcase your name and profile picture at the top of your landing page.
- Dynamic Link Management: Display multiple custom links to your websites, portfolios, or social media platforms.
- Admin Dashboard: A private interface to easily create, update, or delete your links in real-time.
- Responsive Design: A sleek, minimalistic UI optimized for a seamless experience on both desktop and mobile devices.
To ensure that users at all levels can easily access and complete this tutorial, we will utilize SQLite, which does not necessitate a separate database installation or any additional configuration.
SQLite Database
SQLite is a serverless database that operates with zero configuration, storing data in a single cross-platform file. While the database file can be automatically created upon the initial connection, you still use standard SQL commands to define your tables and manage your data.
What Makes This Tutorial Interesting?
This PHP Linktree Clone simplifies the deployment process by allowing you to run the application immediately after placing the files in the XAMPP htdocs directory, making it accessible on localhost without complex environment setup.
Project Structure
Our project contains four PHP files described below:
db.php– Handles the database connection and initializes the SQLite environment.index.php– The public-facing landing page where visitors view your profile and links.admin.php– The secure dashboard used to create, edit, and organize your links.logout.php– Manages session termination and secures the admin panel upon exit.
To build the Linktree Clone Application using simple PHP and SQLite, follow the steps ahead.
Step 1: Database Connection – db.php
First, we define where to save the Database file
$dbFile  = __DIR__ . '/database.sqlite';
Note: __DIR__ is a PHP keyword which means “The Present Directory”. So, the Database file will be stored along with our PHP files. That’s it, the database connection is done with zero configuration.
Next, we check if the Links table exists in the database. If it is not created, we create it like below.
if (!$tableExists) {
  $createTableSQL = "
    CREATE TABLE links (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      title TEXT NOT NULL,
      url TEXT NOT NULL,
      icon_name TEXT DEFAULT 'bi-link-45deg'
    )
  ";
  $pdo->exec($createTableSQL);
}
We have created four columns for our links table:
| Column Name | Purpose |
|---|---|
| id | Auto-generated unique number for each link |
| title | Name of the link (for example, “Instagram”) |
| url | The link to redirect to |
| icon_name | Optional – to save icon name for better UI |
PHP Data Objects (PDO) acts as a universal interface between PHP and various database systems. By providing a consistent abstraction layer, PDO allows you to interact with different databases—such as MySQL, SQLite, or PostgreSQL—using the same standard methods. Once you master PDO, you can switch between database types with minimal code changes. For a deeper dive, refer to the official PHP documentation.
Step 2: The Index Page – index.php
It is a clean and mobile-responsive page designed to show to the users when they access the application.
First, we include the database connection file at the top of this file:
require_once 'db.php';
Then we fetch all records from the links table in ascending order of their IDs.
$stmt = $pdo->query("SELECT * FROM links ORDER BY id ASC");
$links = $stmt->fetchAll(PDO::FETCH_ASSOC);
The following HTML code display profile section. You can replace “Your Name” with your name and the URL of your profile picture.
<img src="https://via.placeholder.com/120" alt="Profile Picture"> <h2>Your Name</h2> <p>Welcome to Linktree Clone!</p>
This loop iterates over all of the links that we fetched from the database. We display these links using Bootstrap to make everything look nice without writing much CSS. Each link appears as a beautiful, clickable button with an icon. Do you remember the icon_name column? This is what was added in links table.
You can explore more about Bootstrap at https://getbootstrap.com/
foreach ($links as $link) {
  // Display each link as a button
}
Step 3: Admin Page – admin.php
The admin dashboard provides full control over your link management. To ensure security, we will begin by implementing a straightforward password-protection layer to restrict access to authorized users only.
$password = 'admin123';
if ($_POST['password'] === $password) {
  $_SESSION['authenticated'] = true;
}
$_SESSION is an associative array used to store and retrieve data across different pages during a user’s visit. As a ‘superglobal,’ it is automatically available in every scope throughout your application. This eliminates the need to declare global $_SESSION; when accessing session data inside functions or methods.
Once a user enters the correct credentials, we utilize $_SESSION to persist their authentication state, effectively ‘remembering’ their logged-in status as they navigate between pages.
Now, let’s explore how to handle the ‘Add Link’ form and the process of persisting new entries into the database.
if (isset($_POST['add_link'])) {
  $title = trim($_POST['title']);
  $url = trim($_POST['url']);
  $icon_name = trim($_POST['icon_name']);
  $stmt = $pdo->prepare("INSERT INTO links (title, url, icon_name) VALUES (?, ?, ?)");
  $stmt->execute([$title, $url, $icon_name]);
}
- Capture Form Input: Retrieve the data submitted by the user through the form.
- Sanitize Data: Use the PHP
trim()function to remove unnecessary whitespace and ensure clean input. - Secure Database Persistence: Safely insert the processed data into the database using prepared statements to prevent SQL injection.
The placeholders (represented by question marks) in the prepared statement are used to mitigate SQL injection risks. PDO securely binds your input data to these placeholders, ensuring the database treats the input as literal values rather than executable code. For a comprehensive overview of these security practices, refer to the official PHP documentation on SQL Injection.
Next, we will implement the logic for managing existing records, specifically focusing on how to update and delete links within the database.
Updating Link
if (isset($_POST['update_link'])) {
  $stmt = $pdo->prepare("UPDATE links SET title = ?, url = ?, icon_name = ? WHERE id = ?");
  $stmt->execute([$title, $url, $icon_name, $id]);
}
Deleting Link
if (isset($_GET['delete'])) {
  $stmt = $pdo->prepare("DELETE FROM links WHERE id = ?");
  $stmt->execute([$id]);
}
Step 4: Logout Functionality – logout.php
session_start();
session_destroy();
header('Location: admin.php');
This lightweight script serves a single purpose: it terminates the active admin session, effectively logging the user out and securing the dashboard.
Complete Project Code
<?php
// db.php - Database connection & auto-setup logic
// Define the database file path
$dbFile = __DIR__ . '/database.sqlite';
try {
// Connect to SQLite database using PDO
// If the file doesn't exist, SQLite will create it automatically
$pdo = new PDO('sqlite:' . $dbFile);
// Set error mode to exceptions for better error handling
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// Check if the 'links' table exists
$tableExists = $pdo->query(
"SELECT name FROM sqlite_master WHERE type='table' AND name='links'"
)->fetch();
// If table doesn't exist, create it
if (!$tableExists) {
$createTableSQL = "
CREATE TABLE links (
id INTEGER PRIMARY KEY AUTOINCREMENT,
title TEXT NOT NULL,
url TEXT NOT NULL,
icon_name TEXT DEFAULT 'bi-link-45deg'
)
";
$pdo->exec($createTableSQL);
// Insert some sample data for demonstration
$insertSampleData = "
INSERT INTO links (title, url, icon_name) VALUES
('Instagram', 'https://instagram.com/yourprofile', 'bi-instagram'),
('Twitter', 'https://twitter.com/yourprofile', 'bi-twitter'),
('GitHub', 'https://github.com/yourprofile', 'bi-github')
";
$pdo->exec($insertSampleData);
}
} catch (PDOException $e) {
// If connection fails, show error message
die("Database connection failed: " . $e->getMessage());
}
?>
<?php
// index.php - The public "Bio" page
// Include database connection
require_once 'db.php';
// Fetch all links from the database
try {
$stmt = $pdo->query("SELECT * FROM links ORDER BY id ASC");
$links = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
$links = [];
$error = "Error fetching links: " . $e->getMessage();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Links | Linktree Clone</title>
<!-- Bootstrap 5.3 CSS from CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons from CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>
<body class="bg-light">
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-12 col-md-6 col-lg-4">
<!-- Profile Section -->
<div class="text-center mb-4">
<!-- Profile Picture (placeholder) -->
<img src="https://via.placeholder.com/120"
alt="Profile Picture"
class="rounded-circle mb-3 border border-3 border-primary">
<!-- Name -->
<h2 class="fw-bold">Your Name</h2>
<p class="text-muted">Welcome to my links!</p>
</div>
<!-- Links Section -->
<div class="d-grid gap-3">
<?php if (isset($error)): ?>
<!-- Display error if fetching links failed -->
<div class="alert alert-danger" role="alert">
<?php echo htmlspecialchars($error); ?>
</div>
<?php endif; ?>
<?php if (empty($links)): ?>
<!-- Show message if no links are available -->
<div class="alert alert-info text-center" role="alert">
No links available yet.
<a href="admin.php" class="alert-link">Add some links</a> to get started!
</div>
<?php else: ?>
<!-- Display each link as a button -->
<?php foreach ($links as $link): ?>
<a href="<?php echo htmlspecialchars($link['url']); ?>"
target="_blank"
class="btn btn-outline-primary btn-lg d-flex align-items-center justify-content-between text-start">
<span>
<!-- Display icon if available -->
<?php if (!empty($link['icon_name'])): ?>
<i class="<?php echo htmlspecialchars($link['icon_name']); ?> me-2"></i>
<?php endif; ?>
<?php echo htmlspecialchars($link['title']); ?>
</span>
<i class="bi bi-arrow-right"></i>
</a>
<?php endforeach; ?>
<?php endif; ?>
</div>
<!-- Admin Link -->
<div class="text-center mt-4">
<a href="admin.php" class="text-muted text-decoration-none small">
<i class="bi bi-gear"></i> Admin Dashboard
</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5.3 JS from CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<?php
// admin.php - Admin dashboard to add/edit/delete links
// Start session for authentication
session_start();
// Include database connection
require_once 'db.php';
// Simple hardcoded password authentication
$correctPassword = 'admin123';
// Handle login
if (isset($_POST['login'])) {
if ($_POST['password'] === $correctPassword) {
$_SESSION['authenticated'] = true;
} else {
$loginError = "Incorrect password!";
}
}
// Handle logout
if (isset($_GET['logout'])) {
session_destroy();
header('Location: admin.php');
exit;
}
// Check if user is authenticated
$isAuthenticated = isset($_SESSION['authenticated']) && $_SESSION['authenticated'] === true;
// Handle CRUD operations (only if authenticated)
if ($isAuthenticated) {
// CREATE - Add new link
if (isset($_POST['add_link'])) {
$title = trim($_POST['title']);
$url = trim($_POST['url']);
$icon_name = trim($_POST['icon_name']);
if (!empty($title) && !empty($url)) {
try {
$stmt = $pdo->prepare("INSERT INTO links (title, url, icon_name) VALUES (?, ?, ?)");
$stmt->execute([$title, $url, $icon_name]);
$successMessage = "Link added successfully!";
} catch (PDOException $e) {
$errorMessage = "Error adding link: " . $e->getMessage();
}
} else {
$errorMessage = "Title and URL are required!";
}
}
// UPDATE - Edit existing link
if (isset($_POST['update_link'])) {
$id = (int)$_POST['id'];
$title = trim($_POST['title']);
$url = trim($_POST['url']);
$icon_name = trim($_POST['icon_name']);
if (!empty($title) && !empty($url)) {
try {
$stmt = $pdo->prepare("UPDATE links SET title = ?, url = ?, icon_name = ? WHERE id = ?");
$stmt->execute([$title, $url, $icon_name, $id]);
$successMessage = "Link updated successfully!";
} catch (PDOException $e) {
$errorMessage = "Error updating link: " . $e->getMessage();
}
} else {
$errorMessage = "Title and URL are required!";
}
}
// DELETE - Remove link
if (isset($_GET['delete'])) {
$id = (int)$_GET['delete'];
try {
$stmt = $pdo->prepare("DELETE FROM links WHERE id = ?");
$stmt->execute([$id]);
$successMessage = "Link deleted successfully!";
} catch (PDOException $e) {
$errorMessage = "Error deleting link: " . $e->getMessage();
}
}
// Fetch all links for display
try {
$stmt = $pdo->query("SELECT * FROM links ORDER BY id ASC");
$links = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
$links = [];
$errorMessage = "Error fetching links: " . $e->getMessage();
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard | Linktree Clone</title>
<!-- Bootstrap 5.3 CSS from CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons from CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>
<body class="bg-light">
<?php if (!$isAuthenticated): ?>
<!-- Login Form -->
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-12 col-md-6 col-lg-4">
<div class="card shadow">
<div class="card-body p-4">
<h3 class="text-center mb-4">
<i class="bi bi-lock-fill"></i> Admin Login
</h3>
<?php if (isset($loginError)): ?>
<div class="alert alert-danger" role="alert">
<?php echo htmlspecialchars($loginError); ?>
</div>
<?php endif; ?>
<form method="POST">
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password"
class="form-control"
id="password"
name="password"
required
autofocus>
<div class="form-text">Default password: admin123</div>
</div>
<button type="submit" name="login" class="btn btn-primary w-100">
Login
</button>
</form>
<div class="text-center mt-3">
<a href="index.php" class="text-muted text-decoration-none small">
<i class="bi bi-arrow-left"></i> Back to Home
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<?php else: ?>
<!-- Admin Dashboard -->
<nav class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">
<i class="bi bi-speedometer2"></i> Admin Dashboard
</span>
<div>
<a href="index.php" class="btn btn-light btn-sm me-2" target="_blank">
<i class="bi bi-eye"></i> View Site
</a>
<a href="?logout=1" class="btn btn-outline-light btn-sm">
<i class="bi bi-box-arrow-right"></i> Logout
</a>
</div>
</div>
</nav>
<div class="container py-4">
<!-- Success/Error Messages -->
<?php if (isset($successMessage)): ?>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<?php echo htmlspecialchars($successMessage); ?>
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<?php endif; ?>
<?php if (isset($errorMessage)): ?>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<?php echo htmlspecialchars($errorMessage); ?>
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<?php endif; ?>
<div class="row">
<!-- Add New Link Form -->
<div class="col-12 col-lg-4 mb-4">
<div class="card shadow-sm">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">
<i class="bi bi-plus-circle"></i> Add New Link
</h5>
</div>
<div class="card-body">
<form method="POST">
<div class="mb-3">
<label for="title" class="form-label">Title</label>
<input type="text"
class="form-control"
id="title"
name="title"
placeholder="e.g., Instagram"
required>
</div>
<div class="mb-3">
<label for="url" class="form-label">URL</label>
<input type="url"
class="form-control"
id="url"
name="url"
placeholder="https://example.com"
required>
</div>
<div class="mb-3">
<label for="icon_name" class="form-label">Icon Class (Optional)</label>
<input type="text"
class="form-control"
id="icon_name"
name="icon_name"
placeholder="e.g., bi-instagram">
<div class="form-text">
<a href="https://icons.getbootstrap.com/" target="_blank" class="text-decoration-none">
Browse Bootstrap Icons
</a>
</div>
</div>
<button type="submit" name="add_link" class="btn btn-primary w-100">
<i class="bi bi-plus-lg"></i> Add Link
</button>
</form>
</div>
</div>
</div>
<!-- Existing Links Table -->
<div class="col-12 col-lg-8">
<div class="card shadow-sm">
<div class="card-header bg-secondary text-white">
<h5 class="mb-0">
<i class="bi bi-list-ul"></i> Manage Links
</h5>
</div>
<div class="card-body">
<?php if (empty($links)): ?>
<div class="alert alert-info text-center" role="alert">
No links yet. Add your first link using the form on the left!
</div>
<?php else: ?>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>URL</th>
<th>Icon</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<?php foreach ($links as $link): ?>
<tr id="row-<?php echo $link['id']; ?>">
<td><?php echo $link['id']; ?></td>
<td><?php echo htmlspecialchars($link['title']); ?></td>
<td>
<a href="<?php echo htmlspecialchars($link['url']); ?>"
target="_blank"
class="text-decoration-none">
<?php echo htmlspecialchars(substr($link['url'], 0, 30)); ?>...
</a>
</td>
<td>
<?php if (!empty($link['icon_name'])): ?>
<i class="<?php echo htmlspecialchars($link['icon_name']); ?>"></i>
<small class="text-muted">
<?php echo htmlspecialchars($link['icon_name']); ?>
</small>
<?php else: ?>
<span class="text-muted">—</span>
<?php endif; ?>
</td>
<td class="text-end">
<!-- Edit Button -->
<button class="btn btn-sm btn-warning"
onclick="editLink(<?php echo $link['id']; ?>, '<?php echo htmlspecialchars($link['title'], ENT_QUOTES); ?>', '<?php echo htmlspecialchars($link['url'], ENT_QUOTES); ?>', '<?php echo htmlspecialchars($link['icon_name'], ENT_QUOTES); ?>')">
<i class="bi bi-pencil"></i>
</button>
<!-- Delete Button -->
<a href="?delete=<?php echo $link['id']; ?>"
class="btn btn-sm btn-danger"
onclick="return confirm('Are you sure you want to delete this link?')">
<i class="bi bi-trash"></i>
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
<i class="bi bi-pencil-square"></i> Edit Link
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<form method="POST">
<div class="modal-body">
<input type="hidden" name="id" id="edit_id">
<div class="mb-3">
<label for="edit_title" class="form-label">Title</label>
<input type="text"
class="form-control"
id="edit_title"
name="title"
required>
</div>
<div class="mb-3">
<label for="edit_url" class="form-label">URL</label>
<input type="url"
class="form-control"
id="edit_url"
name="url"
required>
</div>
<div class="mb-3">
<label for="edit_icon_name" class="form-label">Icon Class (Optional)</label>
<input type="text"
class="form-control"
id="edit_icon_name"
name="icon_name">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Cancel
</button>
<button type="submit" name="update_link" class="btn btn-primary">
<i class="bi bi-check-lg"></i> Update Link
</button>
</div>
</form>
</div>
</div>
</div>
<?php endif; ?>
<!-- Bootstrap 5.3 JS from CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Vanilla JavaScript for Edit Modal -->
<script>
// Function to populate edit modal with link data
function editLink(id, title, url, iconName) {
// Set values in the edit modal form
document.getElementById('edit_id').value = id;
document.getElementById('edit_title').value = title;
document.getElementById('edit_url').value = url;
document.getElementById('edit_icon_name').value = iconName;
// Show the modal
const editModal = new bootstrap.Modal(document.getElementById('editModal'));
editModal.show();
}
</script>
</body>
</html>
<?php
// logout.php - Simple session destroy
// Start the session
session_start();
// Destroy all session data
session_destroy();
// Redirect to admin page
header('Location: admin.php');
exit;
?>
How Everything Works Together
- Deployment: Place the project folder into the
htdocsdirectory within your XAMPP installation. - Access: Open your web browser and navigate to
localhost/linktree-clone. - Initialization: On the initial load,
db.phpautomatically generates the SQLite database file and populates it with sample data. - Public View: The
index.phpfile acts as the primary landing page, displaying your curated list of links. - Authentication: Access the Admin Dashboard by entering the default password,
admin123, to unlock management features. - Management: Use the dashboard to create, update, or remove links in real-time.
- Synchronization: Any modifications made through the dashboard are instantly persisted to the database and will reflect on the public page upon refresh.
Feel free to experiment: modify the color palette, implement new features, or tailor the design to reflect your personal brand.
NOTE: On some Windows XAMPP installations, the SQLite extension is disabled by default. If you get an error saying “Driver not found,” you must open your php.ini file and remove the semicolon ; from the line extension=pdo_sqlite