bigvana - Membuat safelink generator biasanya dilakukan untuk mengarahkan pengguna ke halaman perantara (interstitial) sebelum menuju ke tautan tujuan, sambil menyisipkan iklan atau informasi tambahan. Berikut adalah langkah-langkah untuk membuat safelink generator menggunakan HTML, CSS, JavaScript, dan PHP:
1. Siapkan Hosting
- Pastikan Anda memiliki hosting dengan akses ke PHP dan database jika diperlukan.
- Pastikan domain Anda sudah aktif.
2. Buat Halaman Dasar Safelink
Buat file bernama index.php
dan tambahkan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Safelink Generator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
.container {
width: 80%;
margin: auto;
}
.link {
word-wrap: break-word;
margin-top: 20px;
padding: 10px;
background-color: #f4f4f4;
border: 1px solid #ddd;
border-radius: 5px;
}
.btn {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>Safelink Generator</h1>
<p>Masukkan tautan di bawah ini:</p>
<form action="generate.php" method="POST">
<input type="url" name="url" placeholder="Masukkan URL" required style="width: 60%; padding: 10px;">
<button class="btn" type="submit">Generate</button>
</form>
<div id="result"></div>
</div>
</body>
</html>
3. Buat File untuk Menghasilkan Link Safelink
Buat file bernama generate.php
untuk menangani input dan menghasilkan tautan safelink.
<?php
if (isset($_POST['url'])) {
$url = $_POST['url'];
$encodedUrl = base64_encode($url);
$safelink = "https://yourdomain.com/safelink.php?link=" . $encodedUrl;
echo "<div style='text-align: center; margin-top: 20px;'>
<h3>Safelink Generated:</h3>
<div class='link'>$safelink</div>
<a href='$safelink' target='_blank' class='btn'>Test Link</a>
</div>";
} else {
echo "No URL provided!";
}
?>
4. Buat Halaman untuk Decode Safelink
Halaman ini akan men-decode URL dari safelink untuk mengarahkan ke tujuan akhir. Buat file bernama safelink.php
.
<?php
if (isset($_GET['link'])) {
$decodedUrl = base64_decode($_GET['link']);
header("Location: $decodedUrl");
exit();
} else {
echo "Invalid link!";
}
?>
5. Tambahkan Iklan atau Informasi di Halaman Safelink
Anda bisa menyisipkan iklan sebelum pengguna diarahkan ke URL asli. Modifikasi safelink.php
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Redirecting...</title>
<style>
body {
text-align: center;
margin-top: 50px;
font-family: Arial, sans-serif;
}
</style>
<script>
setTimeout(function() {
window.location.href = "<?= $decodedUrl ?>";
}, 5000); // Tunggu 5 detik sebelum redirect
</script>
</head>
<body>
<h1>Mohon Tunggu...</h1>
<p>Anda akan dialihkan ke tautan tujuan dalam beberapa detik.</p>
<!-- Tambahkan iklan di sini -->
<div style="margin: 20px 0;">
<p>Iklan Anda di sini</p>
</div>
</body>
</html>
6. Uji Coba
- Upload file ke hosting Anda.
- Akses halaman
index.php
, masukkan URL, dan coba hasilnya.
7. Tips Tambahan
- Gunakan HTTPS untuk memastikan tautan aman.
- Integrasikan Google AdSense atau jaringan iklan lainnya untuk monetisasi.
- Periksa kebijakan layanan web Anda agar sesuai dengan aturan mereka.
Modifikasi
Berikut adalah contoh file safelink.php
yang sudah dimodifikasi untuk menampilkan iklan dan memiliki penundaan sebelum mengarahkan pengguna ke tautan tujuan:
<?php
if (isset($_GET['link'])) {
// Decode URL
$decodedUrl = base64_decode($_GET['link']);
} else {
echo "Invalid or missing link!";
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Redirecting...</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px auto;
}
.container {
max-width: 600px;
margin: auto;
}
.ad-section {
margin: 20px 0;
padding: 15px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
}
.button {
display: inline-block;
padding: 10px 20px;
margin-top: 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
}
.button:hover {
background-color: #0056b3;
}
</style>
<script>
// Redirect after 5 seconds
setTimeout(function() {
window.location.href = "<?= htmlspecialchars($decodedUrl) ?>";
}, 5000);
</script>
</head>
<body>
<div class="container">
<h1>Mohon Tunggu...</h1>
<p>Anda akan diarahkan ke tautan tujuan dalam <strong>5 detik</strong>.</p>
<!-- Tempatkan Iklan Anda di Sini -->
<div class="ad-section">
<h3>Iklan Anda</h3>
<p>Ini adalah tempat untuk menampilkan iklan Anda. Anda bisa menggunakan banner, teks, atau video iklan di sini.</p>
</div>
<!-- Tombol Manual untuk Redirect -->
<a href="<?= htmlspecialchars($decodedUrl) ?>" class="button">Klik di sini jika tidak dialihkan</a>
</div>
</body>
</html>
Penjelasan Kode
-
Decoding URL
- Menggunakan fungsi
base64_decode()
untuk mendapatkan URL asli dari parameterlink
.
- Menggunakan fungsi
-
Penundaan Redirect
setTimeout()
pada JavaScript digunakan untuk menunda pengalihan selama 5 detik.
-
Iklan
- Elemen
<div class="ad-section">
disiapkan untuk menempatkan iklan. Anda dapat mengganti konten ini dengan kode iklan dari jaringan seperti Google AdSense atau layanan lainnya.
- Elemen
-
Tombol Manual Redirect
- Memberikan opsi kepada pengguna untuk mengklik tautan secara manual jika pengalihan otomatis tidak berjalan.
-
Keamanan
- Menggunakan fungsi
htmlspecialchars()
untuk memastikan URL aman dan menghindari serangan XSS.
- Menggunakan fungsi
Cara Menggunakannya
- Upload file ini ke server Anda.
- Pastikan parameter
link
di URL yang diberikan ke file ini berupa string yang di-encode menggunakanbase64_encode()
.
Contoh akses safelink:
https://yourdomain.com/safelink.php?link=aHR0cHM6Ly93d3cuZXhhbXBsZS5jb20=
Menambahkan tombol copy, new-link dan home di file index.php
Berikut adalah file index.php
yang telah dimodifikasi untuk menambahkan tombol Copy, New Link, dan Home:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Safelink Generator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
.container {
width: 80%;
margin: auto;
}
.link {
word-wrap: break-word;
margin-top: 20px;
padding: 10px;
background-color: #f4f4f4;
border: 1px solid #ddd;
border-radius: 5px;
}
.btn {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 10px;
}
.btn:hover {
background-color: #0056b3;
}
</style>
<script>
function copyToClipboard() {
const linkText = document.getElementById('generatedLink');
navigator.clipboard.writeText(linkText.innerText).then(() => {
alert('Link copied to clipboard!');
}).catch(err => {
alert('Failed to copy: ', err);
});
}
function resetForm() {
document.getElementById('linkForm').reset();
document.getElementById('result').innerHTML = '';
}
function goHome() {
window.location.href = '/';
}
</script>
</head>
<body>
<div class="container">
<h1>Safelink Generator</h1>
<p>Masukkan tautan di bawah ini:</p>
<form id="linkForm" action="generate.php" method="POST">
<input type="url" name="url" placeholder="Masukkan URL" required style="width: 60%; padding: 10px;">
<button class="btn" type="submit">Generate</button>
</form>
<div id="result">
<?php if (isset($_GET['generated'])): ?>
<div class="link" id="generatedLink"><?= htmlspecialchars($_GET['generated']) ?></div>
<button class="btn" onclick="copyToClipboard()">Copy</button>
<button class="btn" onclick="resetForm()">New Link</button>
<button class="btn" onclick="goHome()">Home</button>
<?php endif; ?>
</div>
</div>
</body>
</html>
Penjelasan Tambahan
-
Tombol Copy
- Tombol ini menggunakan fungsi JavaScript
copyToClipboard()
untuk menyalin teks dari elemen<div>
yang berisi tautan safelink yang dihasilkan.
- Tombol ini menggunakan fungsi JavaScript
-
Tombol New Link
- Menggunakan fungsi
resetForm()
untuk menghapus isi form dan hasil tautan yang ditampilkan.
- Menggunakan fungsi
-
Tombol Home
- Tombol ini menggunakan fungsi
goHome()
untuk mengarahkan pengguna ke halaman utama (/
).
- Tombol ini menggunakan fungsi
-
Parameter URL untuk Hasil Generate
- Script PHP memeriksa parameter
generated
di URL. Nilai ini dapat diatur dari filegenerate.php
saat link berhasil dibuat.
- Script PHP memeriksa parameter
Modifikasi File generate.php
Tambahkan kode untuk mengembalikan tautan ke halaman index.php
setelah link safelink dibuat:
<?php
if (isset($_POST['url'])) {
$url = $_POST['url'];
$encodedUrl = base64_encode($url);
$safelink = "https://yourdomain.com/safelink.php?link=" . $encodedUrl;
// Redirect kembali ke index.php dengan parameter hasil
header("Location: index.php?generated=" . urlencode($safelink));
exit();
} else {
echo "No URL provided!";
}
?>
Cara Kerja
-
Input URL
Masukkan tautan ke form diindex.php
dan klik tombol "Generate". -
Hasil Generate
Setelah safelink dibuat, hasilnya akan ditampilkan di bawah form dengan:- Tombol Copy untuk menyalin link.
- Tombol New Link untuk memulai dari awal.
- Tombol Home untuk kembali ke halaman utama.