Activity: Creating simple web app on Replit Platform
Published
•2 min readM
Mohamad's interest is in Programming (Mobile, Web, Database and Machine Learning). He is studying at the Center For Artificial Intelligence Technology (CAIT), Universiti Kebangsaan Malaysia (UKM).
[1] Create a Replit Project
[2] Edit code
index.php
<?php
// Connect to SQLite DB
$db = new PDO('sqlite:database.sqlite');
// Create table if not exists
$db->exec("CREATE TABLE IF NOT EXISTS users (
id INTEGER PRIMARY KEY,
name TEXT,
email TEXT
);");
// Handle form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$name = $_POST['name'] ?? '';
$email = $_POST['email'] ?? '';
if (!empty($name) && !empty($email)) {
$stmt = $db->prepare("INSERT INTO users (name, email) VALUES (?, ?)");
$stmt->execute([$name, $email]);
}
}
// Fetch all users
$stmt = $db->query("SELECT * FROM users");
$users = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP + SQLite + Bootstrap</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Hero Section (Modern Jumbotron Style) -->
<div class="bg-light py-5 text-center">
<div class="container">
<h1 class="display-5 fw-bold">User Management App</h1>
<p class="lead mb-4">A simple PHP + SQLite + Bootstrap app running on Replit</p>
<a href="#users" class="btn btn-primary btn-lg">View Users</a>
</div>
</div>
<!-- Add User Form -->
<div class="container my-5">
<h2 class="mb-4">Add New User</h2>
<form method="POST">
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<button type="submit" class="btn btn-success">Add User</button>
</form>
</div>
<!-- Users Table -->
<div class="container mb-5" id="users">
<h2 class="mb-4">User List</h2>
<?php if ($users): ?>
<table class="table table-striped table-bordered">
<thead class="table-dark">
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<?php foreach ($users as $user): ?>
<tr>
<td><?= $user['id'] ?></td>
<td><?= htmlspecialchars($user['name']) ?></td>
<td><?= htmlspecialchars($user['email']) ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php else: ?>
<p class="text-muted">No users found. Add one using the form above.</p>
<?php endif; ?>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
.
.
[3] Run code
via preview panel:
view a new browser tab:
2 views