Hallo kawan, berjumpa lagi nih sama toturial www.pemulabelajar.com.
Kali ini kita akan membahas cara membuat short link sendiri.
Pernah dong kawan menjumpai namanya short link, contoh sederhananya
saja goo.gl. goo.gl akan membuat url site kita menjadi
lebih pendek misalnya saja : http://www.pemulabelajar.com bisa
menjadi goo.gl/Jiahs. Begitu juga
tutorial kita membuat short link kali ini. Karena membuat short link
kita sekarang menggunakan PHP Mysql maka kawan disarankan untuk
membuat hosting untuk website yang akan dijadikan website short link
kita sendiri, kawan bisa menggunakan layanan gratis seperti
000webhosting.com atapun idhostinger.com (recomended) selain gratis, pembuatan
databasenya juga termasuk mudah dan juga tutorialnya sangat banyak
digoogle kalau ada waktu saya akan membuatkan tutorial membuat
hosting gratis untuk kawan.
Membuat Short Link
Saya anggap saja kawan sudah membuat hosting disalah satu tempat hosting diatas. Maka langkah awalnya adalah membuat PHP MySql untuk tempat penyimpanan database short link kita nanti. Untuk tutorialnya bisa baca di google.Catatan
Sebelum melanjutkan alangkah baiknya kawan mencatat akses untuk database sobat seperti : nama database, nama user, password, dan hostnya.contoh :
Host : sql.idhostinger.com
nama database: u84617_pemulabelajar
nama user: u84617_pemula
password : pemulabelajar.com
Membuat Tabel Database
Selanjutnya, kawan masuk kedalam PHP MyAdmin kawan dan masuk kedalam tab sql, ketikkan kode seperti dibawah ini.
SQL Membuat Tabel
CREATE TABLE IF NOT EXISTS `urls` (
`url_id` int(11) NOT NULL auto_increment,
`url_link` varchar(255) default NULL,
`url_short` varchar(6) default NULL,
`url_date` int(10) default NULL,
`url_ip` varchar(255) default NULL,
`url_hits` int(11) default '0',
PRIMARY KEY (`url_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
Jika sukses dijalankan maka akan ada sebuah tabel yang akan muncul didalam database kawan. Maka langkah membuat short link dengan PHP satu tahap sudah selesai.
Login ftp
Kawan bisa membacanya di googleMembuat db.php
Buatlah file dengan namadb.php ingat formatnya adalah
php. Silahkan copy script dibawah ini jika kawan ingin
mengetiknya juga tidak apa-apa.
Kode db.php
<?php
//mysql db connection information
$hostname = "localhost"; //host
$database = "database_name"; //database
$username = "db_username"; //username for your database
$password = "db_password"; //password for your database
$site = mysql_connect($hostname, $username, $password);
mysql_select_db($database, $site);
//
$server_name = "http://".$_SERVER['HTTP_HOST']."/";
?>
//mysql db connection information
$hostname = "localhost"; //host
$database = "database_name"; //database
$username = "db_username"; //username for your database
$password = "db_password"; //password for your database
$site = mysql_connect($hostname, $username, $password);
mysql_select_db($database, $site);
//
$server_name = "http://".$_SERVER['HTTP_HOST']."/";
?>
Simpan file db.php tersebut didalam localhost idhostinger kawan dan coba akses web kawan dengan menambah
/db.php contoh : www.pemulabelajar.com/db.php jika tidak ada error maka kawan berhasil menyambungkan website ke database.
Membuat index.php
Langkah ini adalah membuat file induk dari website kita karena tanpa index website kita sama saja akan kosong melompong seperti kacang polong. Copy script di bawah ini kedalam index.php yang kawan buat tadi.
Kode index.php
<?php
//include database connection details
include('db.php');
//redirect to real link if URL is set
if (!empty($_GET['url'])) {
$redirect = mysql_fetch_assoc(mysql_query("SELECT url_link FROM urls WHERE url_short = '".addslashes($_GET['url'])."'"));
$redirect = "http://".str_replace("http://","",$redirect[url_link]);
header('HTTP/1.1 301 Moved Permanently');
header("Location: ".$redirect);
}
//
//insert new url
if ($_POST['url']) {
//get random string for URL and add http:// if not already there
$short = substr(str_shuffle('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'), 0, 5);
mysql_query("INSERT INTO urls (url_link, url_short, url_ip, url_date) VALUES
(
'".addslashes($_POST['url'])."',
'".$short."',
'".$_SERVER['REMOTE_ADDR']."',
'".time()."'
)
");
$redirect = "?s=$short";
header('Location: '.$redirect); die;
}
//
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PemulaBelajar's URL shrinker</title>
<style type="text/css">
<!--
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 25px;
text-align: center;
}
input {
font-size: 20px;
padding: 10px;
}
h2 {
font-size: 16px;
margin: 0px;
padding: 0px;
}
h1 {
margin: 0px;
padding: 0px;
font-size: 35px;
color: #009999;
}
form {
margin: 0px;
padding: 0px;
}
h3 {
font-size: 13px;
color: #666666;
font-weight: normal;
}
h3 a {
color: #006699;
text-decoration: none;
}
table {
font-size: 13px;
background-color: #EBEBEB;
border: 1px solid #CCCCCC;
}
-->
</style>
</head>
<body>
<h1> URL to shrink: </h1>
<form id="form1" name="form1" method="post" action="">
<input name="url" type="text" id="url" value="http://" size="75" />
<input type="submit" name="Submit" value="Go" />
</form>
<!--if form was just posted-->
<?php if (!empty($_GET['s'])) { ?>
<br />
<h2>Here's the short URL: <a href="<?php echo $server_name; ?><?php echo $_GET['s']; ?>" target="_blank"><?php echo $server_name; ?><?php echo $_GET['s']; ?></a></h2>
<?php } ?>
<!---->
<br />
<br />
</body>
</html>
//include database connection details
include('db.php');
//redirect to real link if URL is set
if (!empty($_GET['url'])) {
$redirect = mysql_fetch_assoc(mysql_query("SELECT url_link FROM urls WHERE url_short = '".addslashes($_GET['url'])."'"));
$redirect = "http://".str_replace("http://","",$redirect[url_link]);
header('HTTP/1.1 301 Moved Permanently');
header("Location: ".$redirect);
}
//
//insert new url
if ($_POST['url']) {
//get random string for URL and add http:// if not already there
$short = substr(str_shuffle('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'), 0, 5);
mysql_query("INSERT INTO urls (url_link, url_short, url_ip, url_date) VALUES
(
'".addslashes($_POST['url'])."',
'".$short."',
'".$_SERVER['REMOTE_ADDR']."',
'".time()."'
)
");
$redirect = "?s=$short";
header('Location: '.$redirect); die;
}
//
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PemulaBelajar's URL shrinker</title>
<style type="text/css">
<!--
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 25px;
text-align: center;
}
input {
font-size: 20px;
padding: 10px;
}
h2 {
font-size: 16px;
margin: 0px;
padding: 0px;
}
h1 {
margin: 0px;
padding: 0px;
font-size: 35px;
color: #009999;
}
form {
margin: 0px;
padding: 0px;
}
h3 {
font-size: 13px;
color: #666666;
font-weight: normal;
}
h3 a {
color: #006699;
text-decoration: none;
}
table {
font-size: 13px;
background-color: #EBEBEB;
border: 1px solid #CCCCCC;
}
-->
</style>
</head>
<body>
<h1> URL to shrink: </h1>
<form id="form1" name="form1" method="post" action="">
<input name="url" type="text" id="url" value="http://" size="75" />
<input type="submit" name="Submit" value="Go" />
</form>
<!--if form was just posted-->
<?php if (!empty($_GET['s'])) { ?>
<br />
<h2>Here's the short URL: <a href="<?php echo $server_name; ?><?php echo $_GET['s']; ?>" target="_blank"><?php echo $server_name; ?><?php echo $_GET['s']; ?></a></h2>
<?php } ?>
<!---->
<br />
<br />
</body>
</html>
Simpan kode diatas dan jalankan dengan mengakses website kawan misal : www.pemulabelajar.com jika berhasil maka akan ada inputan untuk men-short link kita sendiri.
Membuat .htaccess
Langkah ini adalah langkah terakhir dalam pembuatan kita kali ini karena dengan .htaccess akan membuat website kita menjadi lebih url friendly kata orang sih. Copy script dibawah ini dan masukkan kedalam file .htaccess.
Kode .htaccess
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) index.php?url=$1 [L,QSA]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) index.php?url=$1 [L,QSA]
Simpanlah kode diatas dan coba jalankan website kawan.
Untuk demonya kawan bisa melihat dibawah ini tetapi website demo kali ini ada sedikit perubahan pada sisi scriptnya saja.
Demo
Update 06 Februari 2016
Tutorial Lengkap Membuat Short Link dengan Iklan
Membuat shortlink / link pendek tentu memiliki maksud tertentu, salah satunya kita harus memiliki keuntungan dari Short Link / link pendek ini. Untuk itu dari setiap Short Link memiliki iklan agar setidaknya membiayai hosting website. Karena itu Tutorial Lengkap Membuat Short Link dengan Iklan melengkapi Tutorial Membuat Short Link tanpa Iklan diatas.Buat File Menampung Iklan
Untuk menampilkan iklan, tentu saja memerlukan halamanwebsite. Halaman website ini nanti akan dipakai untuk melanjutkan url website yang sudah dipendekan tadi.Buatlah file dengan nama
forward.php dan salin kode dibawah ini.
Kode membuat short link dengan iklan
<?php
//include database connection details
include('db.php');
//redirect to real link if URL is set
if (!empty($_GET['url'])) {
$redirect = mysql_fetch_assoc(mysql_query("SELECT url_link FROM urls WHERE url_short = '".addslashes($_GET['url'])."'"));
$redirect = $redirect['url_link'];
}
//
?>
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Download Page | apkgratis.xyz</title>
<!-- Bootstrap core CSS -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="http://getbootstrap.com/examples/blog/blog.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="/">Home</a>
<a class="blog-nav-item" href="#">New features</a>
<a class="blog-nav-item" href="#">Press</a>
<a class="blog-nav-item" href="#">New hires</a>
<a class="blog-nav-item" href="#">About</a>
</nav>
</div>
</div>
<div class="container" id="now">
<div class="blog-header" style="text-align: center;">
<h1 class="blog-title">Download Page</h1>
<p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
<p>Iklan disini</p>
<script type="text/javascript">
var WaktunyaBro = 10; <!--script di mulai dari angka 5 bisa di sesuai kan-->
$(document).ready(function() { startCountdown(); });
function startCountdown() {
if((WaktunyaBro - 1) >= 0){
WaktunyaBro = WaktunyaBro - 1;
$("#tungguyabro").html('Please wait <font style="font-size:125%;"> <b>' + WaktunyaBro + '</b></font> second..!');
setTimeout(startCountdown, 1000);
}
else{
$("#tungguyabro").html('<button class="btn btn-success" style="text-align: right" onClick="window.location=\'<?php echo $redirect ?>\'" target="_blank">Visit Now!</button>'); <!--di sini link setelah tulisan countdown-->
}
}
</script>
<div id="tungguyabro"></div>
<a href="#now">Click 2x For Visit</a>
<div>Iklan bisa disini</div>
<p>300x 250 iklan disini
</p>
</div>
<div class="row">
<div class="col-sm-8 blog-main">
<div class="blog-post">
<h2 class="blog-post-title">Sample blog post</h2>
<p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
<p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
<hr>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Bisa disini iklan</p>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div><!-- /.blog-post -->
<nav>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
</div><!-- /.blog-main -->
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4>About</h4>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="sidebar-module">
<h4>Archives</h4>
<ol class="list-unstyled">
<li><a href="#">March 2014</a></li>
<li><a href="#">February 2014</a></li>
<li><a href="#">January 2014</a></li>
<li><a href="#">December 2013</a></li>
<li><a href="#">November 2013</a></li>
<li><a href="#">October 2013</a></li>
<li><a href="#">September 2013</a></li>
<li><a href="#">August 2013</a></li>
<li><a href="#">July 2013</a></li>
<li><a href="#">June 2013</a></li>
<li><a href="#">May 2013</a></li>
<li><a href="#">April 2013</a></li>
</ol>
</div>
<div class="sidebar-module">
<h4>Elsewhere</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>
</div><!-- /.blog-sidebar -->
</div><!-- /.row -->
</div><!-- /.container -->
<footer class="blog-footer">
<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>
<a href="#">Back to top</a>
</p>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script>window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><\/script>')</script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
//include database connection details
include('db.php');
//redirect to real link if URL is set
if (!empty($_GET['url'])) {
$redirect = mysql_fetch_assoc(mysql_query("SELECT url_link FROM urls WHERE url_short = '".addslashes($_GET['url'])."'"));
$redirect = $redirect['url_link'];
}
//
?>
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Download Page | apkgratis.xyz</title>
<!-- Bootstrap core CSS -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="http://getbootstrap.com/examples/blog/blog.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="/">Home</a>
<a class="blog-nav-item" href="#">New features</a>
<a class="blog-nav-item" href="#">Press</a>
<a class="blog-nav-item" href="#">New hires</a>
<a class="blog-nav-item" href="#">About</a>
</nav>
</div>
</div>
<div class="container" id="now">
<div class="blog-header" style="text-align: center;">
<h1 class="blog-title">Download Page</h1>
<p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
<p>Iklan disini</p>
<script type="text/javascript">
var WaktunyaBro = 10; <!--script di mulai dari angka 5 bisa di sesuai kan-->
$(document).ready(function() { startCountdown(); });
function startCountdown() {
if((WaktunyaBro - 1) >= 0){
WaktunyaBro = WaktunyaBro - 1;
$("#tungguyabro").html('Please wait <font style="font-size:125%;"> <b>' + WaktunyaBro + '</b></font> second..!');
setTimeout(startCountdown, 1000);
}
else{
$("#tungguyabro").html('<button class="btn btn-success" style="text-align: right" onClick="window.location=\'<?php echo $redirect ?>\'" target="_blank">Visit Now!</button>'); <!--di sini link setelah tulisan countdown-->
}
}
</script>
<div id="tungguyabro"></div>
<a href="#now">Click 2x For Visit</a>
<div>Iklan bisa disini</div>
<p>300x 250 iklan disini
</p>
</div>
<div class="row">
<div class="col-sm-8 blog-main">
<div class="blog-post">
<h2 class="blog-post-title">Sample blog post</h2>
<p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
<p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
<hr>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Bisa disini iklan</p>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div><!-- /.blog-post -->
<nav>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
</div><!-- /.blog-main -->
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4>About</h4>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="sidebar-module">
<h4>Archives</h4>
<ol class="list-unstyled">
<li><a href="#">March 2014</a></li>
<li><a href="#">February 2014</a></li>
<li><a href="#">January 2014</a></li>
<li><a href="#">December 2013</a></li>
<li><a href="#">November 2013</a></li>
<li><a href="#">October 2013</a></li>
<li><a href="#">September 2013</a></li>
<li><a href="#">August 2013</a></li>
<li><a href="#">July 2013</a></li>
<li><a href="#">June 2013</a></li>
<li><a href="#">May 2013</a></li>
<li><a href="#">April 2013</a></li>
</ol>
</div>
<div class="sidebar-module">
<h4>Elsewhere</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>
</div><!-- /.blog-sidebar -->
</div><!-- /.row -->
</div><!-- /.container -->
<footer class="blog-footer">
<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>
<a href="#">Back to top</a>
</p>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script>window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><\/script>')</script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Keterangan :
Kode Short Link dengan iklan diatas melakukan pencarian Short Link ( kuning ) didalam database yang dimiliki, jika memiliki data tentang Short Link ( kuning ) didalam database maka pengunjung akan diarahkan ke link yang sudah tersimpan didatabase (biru).
Merubah kode .htaccess
Karena Tutorial Membuat Short Link tanpa Iklan diatas, yang mana.htaccess mengarahkan setiap short link ke index.php maka sekarang kita arahkan ke forward.php agar pengunjung di `ajak` melihat iklan terlebih dahulu sebelum melanjutkan ke link asli dari sort link yang dibuat.Sebelumnya
.htaccess adalah seperti dibawah ini
Kode .htaccess awal
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) index.php?url=$1 [L,QSA]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) index.php?url=$1 [L,QSA]
Dan sekarang coba ubah
.htaccess sebelumnya menjadi seperti ini.
Kode .htaccess setelah
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) forward.php?url=$1 [L,QSA]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) forward.php?url=$1 [L,QSA]
Keterangan :
Sebelumnya setiap Short Link yang didapat akan langsung mengarah ke
index.php dan di index.php diteruskan langsung ke link asli Short Link.Setelah melakukan perubahan setiap short link diarahkan ke
forward.php dan diforward.php pengunjung di`ajak` untuk melihat iklan terlebih dahulu sebelum pengunjung mengklik lanjutkan ke link aslinya.Untuk demonya silahkan klik demo dibawah ini.
DEMO
Sekian artikel tentang tutorial web tentang Membuat Short Link Sendiri Dengan PHP MySql. Semoga bisa bermanfaat bagi kawan, dan jika kawan tidak keberatan silahkan bagikan artikel ini dengan klik tombol bagikan di bawah. Salam dan terima kasih :)
