The purpose of this project is to successfully install, configure and deploy a Linux/Apache/MySQL/PHP webserver using Ubuntu Linux and implement a very basic note taking app in PHP. To begin, provision a fresh installation of Ubuntu and connect to it using an SSH application such as PuTTY. Log in as root in order to have sufficient privileges to successfully complete the process.
Begin by running apt update and apt upgrade to update the package repositories and upgrade all packages.
Installing Apache
Install Apache by running apt install apache2 and confirm by pressing Y when prompted.
Apache will be installed, but the Ubuntu firewall still must be configured to allow HTTP traffic. In order to allow in both HTTP traffic on port 80 and TLS/SSL encrypted traffic on port 443, run ufw allow in “Apache Full” and verify with the command ufw status
We can verify that everything with Apache is properly configured by opening a web browser and accessing our public IP address with HTTP (not HTTPS because we don’t have a valid SSL certificate yet). If everything is working, Apache will serve a default page like this:
Installing MySQL
Install MySQL by running apt install mysql-server and pressing Y to confirm. In order to secure our MySQL database, we should run mysql_secure_installation, a script that modifies some MySQL settings to be more secure. Unfortunately, MySQL will throw an error if we attempt to run this without first configuring our MySQL root user (different from the Ubuntu system root user) to authenticate via a password. Do this by opening a MySQL prompt by running mysql and then update the MySQL root user authentication by running the SQL command
ALTER USER 'root'@'localhost' IDENTIFIED WITH caching_sha2_password BY 'password1';
Now we return to the Ubuntu root command line by simply typing exit in the MySQL prompt and we can successfully run mysql_secure_installation, configuring the security settings as shown.
Now that we have Apache, the web server, and MySQL, the database, running, we can install PHP.
Installing PHP
We will need a few packages to tie our server infrastructure together: php, php-mysql, and libapache2-mod-php. We install these packages by running apt install php libapache2-mod-php php-mysql. Once it is installed we can confirm by running php -v to show the version of PHP.
Configuring Apache to Serve PHP files
We now have Linux, Apache, MySQL, and PHP all installed. However, Apache by default will serve .html files preferentially before .php files, meaning that if there is an index.html file in a directory, Apache will serve that file instead of index.php. We want to change this to make Apache serve index.php first instead. To do this, use the text editor nano to open the dir.conf configuration file. Use the command nano /etc/apache2/mods-enabled/dir.conf to open the file and modify it so that index.php is first after DirectoryIndex like so:
Save the file in nano using Ctrl-X. Now that we have the LAMP server fully configured, we can do some actually interesting stuff with it! Let’s make a simple note taking website.
A Basic PHP Note Taking Website
Now we are going to create an extremely basic note taking website with the capability to create, edit and search notes. The first step is to create the MySQL database.
Creating the MySQL database
To create the MySQL database, log into MySQL from our root command line using the command mysql -u root -p and enter the password for our MySQL root user (remember, this is separate from the Ubuntu root user).
From the mysql> command prompt, we create the database with the following SQL command:
CREATE DATABASE zettelkasten;
USE zettelkasten;
CREATE TABLE notes (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(255) NOT NULL,
content TEXT,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);Now we have our database set up, let’s get the directory structure set up.
Setting Up the Project Directory
This part is simple – just cd into the Apache root directory (/var/www/html) and mkdir a directory called “garden” and cd into it.
Creating the App in PHP
The next step is to actually create the app. For this simple app, we’re going to have db.php, a database connection, index.php to view and search the notes, view.php to display the notes and edit.php to add and edit the notes. All of these will be made in nano, the Linux text editor. We’re going to start with db.php – create it by running nano in our garden folder. And create a file with the following text:
<?php
$host = 'localhost';
$db = 'zettelkasten';
$user = 'root';
$pass = 'password1'; // or your MySQL password
$charset = 'utf8mb4';
$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
];
try {
$pdo = new PDO($dsn, $user, $pass, $options);
} catch (\PDOException $e) {
throw new \PDOException($e->getMessage(), (int)$e->getCode());
}
?>Save the file as db.php using Ctrl-O in nano.
Next we’re going to create index.php in order to search and view notes. Just like before, open nano and create a file with the following text:
<?php
require 'db.php';
$search = $_GET['search'] ?? '';
$stmt = $pdo->prepare("SELECT id, title FROM notes WHERE title LIKE ? OR content LIKE ? ORDER BY updated_at DESC");
$stmt->execute(["%$search%", "%$search%"]);
$notes = $stmt->fetchAll();
?>
<h1>My Digital Garden</h1>
<form method="get">
<input type="text" name="search" value="<?= htmlspecialchars($search) ?>" placeholder="Search notes...">
<button type="submit">Search</button>
</form>
<a href="edit.php">➕ New Note</a>
<ul>
<?php foreach ($notes as $note): ?>
<li><a href="view.php?id=<?= $note['id'] ?>"><?= htmlspecialchars($note['title']) ?></a></li>
<?php endforeach; ?>
</ul>Once again, use Ctrl-O in nano to save it as index.php.
Next, to create view.php, we are once again opening nano and creating a file with the following text:
<?php
require 'db.php';
$id = $_GET['id'] ?? null;
if (!$id) exit('No note ID.');
$stmt = $pdo->prepare("SELECT * FROM notes WHERE id = ?");
$stmt->execute([$id]);
$note = $stmt->fetch();
if (!$note) exit('Note not found.');
function linkify($text) {
return preg_replace('/\[\[(.*?)\]\]/', '<a href="search.php?query=$1">$1</a>', htmlspecialchars($text));
}
?>
<h2><?= htmlspecialchars($note['title']) ?></h2>
<p><?= nl2br(linkify($note['content'])) ?></p>
<a href="edit.php?id=<?= $note['id'] ?>">✏️ Edit</a> |
<a href="index.php">🏠 Home</a>Use Ctrl-O to save it in nano as view.php.
Now the final step is to create edit.php, which will allow us to add and modify our notes. Once again in nano, create a file with the following text and save it as edit.php:
<?php
require 'db.php';
$id = $_GET['id'] ?? null;
$title = '';
$content = '';
if ($id) {
$stmt = $pdo->prepare("SELECT * FROM notes WHERE id = ?");
$stmt->execute([$id]);
$note = $stmt->fetch();
$title = $note['title'];
$content = $note['content'];
}
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$title = $_POST['title'];
$content = $_POST['content'];
if ($id) {
$stmt = $pdo->prepare("UPDATE notes SET title = ?, content = ? WHERE id = ?");
$stmt->execute([$title, $content, $id]);
} else {
$stmt = $pdo->prepare("INSERT INTO notes (title, content) VALUES (?, ?)");
$stmt->execute([$title, $content]);
$id = $pdo->lastInsertId();
}
header("Location: view.php?id=$id");
exit;
}
?>
<form method="post">
<input type="text" name="title" value="<?= htmlspecialchars($title) ?>" placeholder="Title" required><br>
<textarea name="content" rows="10" cols="80" placeholder="Write your note here..."><?= htmlspecialchars($content) ?></textarea><br>
<button type="submit">Save</button>
</form>
<a href="index.php">🏠 Home</a>Once we have all our files, let’s do an ls in our /var/www/html/garden folder. It should look like this:
We can check out the app at: http://45.77.200.61/garden/
Success!
