If you can read this in my blog it's great.
In this post, We'll create a site like Github Gist using PHP, CSS and a 1 line of JavaScript! If you want a preview, you can go to This link or see below.
Click this link because Dev.to image embed doesn't work
Collecting the stuff we need
Before we begin, you must have these things.
- A local server
- A code editor (I use Visual Studio Code)
- Basic Knowledge of CSS, HTML & PHP
- A MySQL Database
Getting Started
Creating the files
Now, let's start. The first thing is to do, create the files. The files are,
index.php - The index file
config.php -The configuration file
gist.php - The gist view/delete file
gists.php - The file that shows all the gists
styles.css- The stylesheet
Creating the database
We will create a database named gists and create a table named gists. The table structure will look like this.
| title | content | type | id |
|---|---|---|---|
| unique | mediumtext | varchar(40) | unique |
If you are too lazy to create the table, you can use this SQL code.
CREATE TABLE `gists` (
`title` varchar(99) NOT NULL,
`content` mediumtext NOT NULL,
`type` varchar(40) NOT NULL,
`id` varchar(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
ALTER TABLE `gists`
ADD UNIQUE KEY `id` (`id`),
ADD UNIQUE KEY `title` (`title`);
COMMIT;
Coding
And It's time for the coding. We'll first define the database connection constants. Put this in your config.php file.
$servername = "localhost";
$username = "root";
$password = "";
$database = "gist";
try {
$conn = new PDO("mysql:host=$servername;dbname=$database", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
echo "<div class=\"message error\">Connection failed: " . $e->getMessage(). "</div>";
define('ERROR', true);
}
// Generate random string function
function generateRandomString($length = 10) {
$characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
$charactersLength = strlen($characters);
$randomString = '';
for ($i = 0; $i < $length; $i++) {
$randomString. = $characters[rand(0, $charactersLength - 1)];
}
return $randomString;
}
We use PDO because It's easy & secure.
Then, in all the other PHP files (Not config.php) put this code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>My Own Gist</title>
</head>
<body>
<div id="container">
<!-- This is where we put code -->
</div>
</body>
</html>
This is the template we're going to use. And for the CSS, you can style yourself (Edit styles.css) or Go to this link to get the demo CSS code.
Create A New Gist Page
This is the code for the create new gist page. (index.php)
require "config.php";
$e=$m="";
if ( isset($_GET['create']) && isset($_POST['title']) && isset($_POST['content']) && isset($_POST['type'])) {
if (empty($_POST['title']) or empty($_POST['content']) or empty($_POST['type'])) {
$e=true;
$m="Please fill all the fields";
}
else {
try {
$stmt=$conn->prepare("INSERT INTO gists (`title`, `content`, `type`, `id`)
VALUES (:title, : content, :type, :id)");
$stmt->bindParam(':title', $tit);
$stmt->bindParam(':content', $cont);
$stmt->bindParam(':type', $type);
$stmt->bindParam(':id', $id);
switch ($_POST['type']) {
case "1": $type="";
break;
case "2": $type="css";
break;
case "3": $type="javascript";
break;
case "4": $type="php";
break;
case "5": $type="xml";
break;
case "6": $type="jsx";
break;
case "7": $type="c#";
break;
default: $type="";
}
$tit=$_POST['title'];
$cont=$_POST['content'];
$type=$type;
$id=generateRandomString(10);
$stmt->execute();
$e=false;
$m="Gist added";
header("Location: gist.php?id=".$id);
}
catch (PDOException $er) {
$e=true;
$m=$er->getMessage();
}
}
}
?>
Now, I'll explain what this code does. First, it checks if $_GET["create"] , $_GET["title"] , $_GET["content"],$_GET["type"] is present. Then, it will check if the values are empty. If it's empty, set the $e variable to true else it will try to add the data into the database and if there's a error it'll tell the user.
Now add this inside the #container of index.php.
<?php if (defined("ERROR")) {
die("An error occured");
} ?>
<?php
if ($e) {
echo "<div class=\"message error\">" . $m . "</div>";
}
?>
<h1 class="heading">Add new Gist</h1>
<!---- ---->
<div class="divider"></div>
<!---- ---->
<form action="?create" id="newgist" method="POST">
<!---- ---->
<label for="gist-title" class="label">Title</label>
<input type="text" id="gist-title" name="title" class="input">
<!---- ---->
<label for="gist-content" class="label">Content</label>
<textarea id="gist-content" name="content" class="input" style="height: 200px;font-family: monospace;font-size: 15px;"></textarea>
<!---- ---->
<label for="gist-type" class="label">Type</label>
<select name="type" id="gist-type" class="input">
<option value="1">Plain text</option>
<option value="2">CSS</option>
<option value="3">Javascript</option>
<option value="4">PHP</option>
<option value="5">HTML</option>
<option value="6">JSX</option>
<option value="7">C#</option>
</select>
<!---- ---->
<div class="divider"></div>
<!---- ---->
<button type="submit" class="btn">Create Gist</button>
</form>
<!---- ---->
<div class="divider"></div>
<div class="divider"></div>
<div class="divider"></div>
<!---- ---->
<a href="gists.php" class="btn">Show other gists</a>
Single gist page
And in the gist.php file, add this code
<?php require "config.php";
if ( !isset($_GET["id"])) {
die("Not Found");
}
if (isset($_GET["delete"])) {
if (isset($_GET['confirm'])) {
try {
$stmt=$conn->prepare("DELETE FROM Gists WHERE `id` = :id");
$stmt->bindParam(':id', $_GET["id"]);
$stmt->execute();
header("Location: gists.php");
}
catch (PDOException $e) {
echo "Error: " . $e->getMessage();
}
}
die("<a href=\"gist.php?delete&id=" . $_GET["id"] . "&confirm=true\">Click to confirm</a><br><br><br><a class=\"btn\" href=\"gist.php?id=" . $_GET["id"] . "\">Click to go back</a>");
die();
}
try {
$stmt=$conn->prepare("SELECT * FROM Gists WHERE `id` = :id");
$stmt->bindParam(':id', $_GET["id"]);
$stmt->execute(); // set the resulting array to associative
$result=$stmt->fetchAll();
if ( !isset($result[0]['id'])) {
die("Not found");
}
else {
$title=$result[0]['title'];
$type=$result[0]['type'];
$code=$result[0]['content'];
}
}
catch (PDOException $e) {
echo "Error: " . $e->getMessage();
}
?>
<h1 class="heading"><?=htmlspecialchars($title) ?><sup><?=$type ?></sup></h1><pre><code class="language-<?= $type ?>"><?=str_replace("<", "<", $code) ?></code></pre><br><br><a href="gists.php" class="btn">Show other gists</a><a href="index.php" class="btn">Create Gist</a><a href="gist.php?delete&id=<?= $result[0]['id'] ?>" style="background: #ab0000;" class="btn">Delete</a>
And for the end of the body, add this code.
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<script>
hljs.highlightAll();
</script>
Ok, This is all this is all the hard stuff to do. So you can get the code from below.
Top comments (0)