آموزش ساخت یک کوتاه کننده لینک با php

EhsaanDev · 3/12/11

جلسه اول

درود

کوتاه کننده لینک چیست؟کوتاه کننده لینک یا Link Shorter به سرویس های اینترنتی می گویند که نشانی های بلند اینترنتی را کوتاه می کنند و دسترسی به آن ها را برای شما راحت تر می سازد.

چه می خواهیم انجام بدهیم؟ امروز می خواهیم یک کوتاه کننده لینک ساده با زبان محبوب PHP ایجاد کنیم و یک سوپرایز آن هم این که کوتاه کننده ما قرار است آژاکس باشد! قبل از هر چیز به موارد زیر احتیاج داریم:

مواد مورد نیاز:

- یک استکان سرپر PHP

- یک نصفه استکان HTML و CSS

- یک بسته از برنامه WAMP یا XAMPP (با قابلیت پشیبانی از APACHE)

- یک پارچ Notepad++

- یک لیوان محلول jQuery با jQuery Form

شروع کار

پس از استارت برنامه WAMP یا XAMPP، یک پوشه در مسیر اجرای برنامه (در برنامه WAMP: X:\wamp\www و در برنامه XAMPP: X:\xampp\htdocs به جای X درایوی که در آن برنامه نصب شده را قرار دهید) با نام دلخواه می سازیم تا پرونده های مورد نظرمان را در آن قرار دهیم. طبق تصویر زیر پرونده ها را ایجاد کنید:

You must be registered for see images attach

پایان جلسه اول

EhsaanDev · 3/12/11

جلسه دوم

همانطور که جلسه پیش گفتیم قرار است کوتاه کننده ما آژاکس باشد. ما از کتابخانه jQuery و پلاگین jQuery Form استفاده می کنیم. قصد داریم تا از HTML5 هم برای طراحی فرم استفاده بکنم. فایل index.php را با آفتاب پرست خوشگلمان یعنی Notepad++ باز کنید و کد های زیر را قرار دهید:

<!DOCTYPE HTML>
<html dir="Rtl">
<head>
<title>Simple URL Shorter</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<meta name="Source" content="PersianScript.ir" />
<script type="text/javascript" src="//code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script
<script type="text/javascript" src="form.js"></script>
</head>
<body>
<div class="result" style="display:none"></div>
<form action="short.php" method="POST" id="short">
<label for="url">نشانی موردنظر خود را وارد کنید: </label><br /><input type="url" name="url" required="required" placeholder="مثال: http://www.persianscript.ir/" /><br />
<input type="submit" value="کوتاه کردن" name="exec" id="exec"/>
</form>
</body>
</html>

کد:

خب برای این که فرم ما زیباتر باشد، یک CSS هم برای فرم می نویسیم. دستورات CSS زیر در فایل style.css قرار دهید.

* {
margin:0;
padding:0;
}
html {
font:10pt "Tahoma",Arial,senf-serif;
direction:rtl;
background:#FFF;
text-shadow:1px 1px 1px #cacaca;
}
body {
margin:50px auto;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
border:1px solid #c9c9c9;
width:450px;
}
form {
text-align:center;
}
input,select,textarea {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font:10pt "Tahoma",Arial,senf-serif;
padding:5px;
margin-bottom:7px;
border:1px solid #cacaca;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
width:300px;
margin-top:4px;
}
input:hover,select:hover,textarea:hover {
border:1px solid #7613ae;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
input:focus,select:fous,textarea:focus {
border:1px solid #0096ff;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
input[type="url"]:focus {
direction:ltr;
}
input[type="submit"],button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font:10pt "Tahoma",Arial,senf-serif;
padding:5px;
border:1px solid #cacaca;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
background:#cacaca;
color:#FFF;
}
input[type="submit"]:hover,button:hover {
background:#7613ae;
border:1px solid #c9c9c9;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
input[type="submit"]::disable,button::disable{
background:#000;
border:1px solid #c9c9c9;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.result {
background:#7613ae;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:white;
text-align:center;
padding:5px;
}
img {
border:none;
}

کد:

جلسه دوم هم به سلامتی تمام شد.

در جلسه بعد ما می خواهیم با jQuery Form کار کنیم تا فرممان را Ajax کنیم و بعد از آن وارد مسائل دیتابیس و کوتاه کردن لینک و نمایش آن بشویم.

EhsaanDev · 4/12/11

جلسه سوم

همانطور که جلسه های قبل گفتیم، فرم ما قرار است که آژاکس باشد، یعنی بدون Refresh شدن صفحه، اطلاعات به پردازشگر موردنظر ارسال و واکنش آن دوباره به صفحه ارسال شد.

برای این کار ما از محلول jQuery و jQuery Form استفاده می کنیم. حالا یک فایل هم با اسم form.js که در جلسه قبل معرفی کردیم، بسازید و کدهای زیر را در آن قرار دهید:

$(document).ready(function() {
var options = {
target: '.result',
beforeSubmit: showRequest,
success: showResponse
};
$('#short').ajaxForm(options);
});

// pre-submit callback
function showRequest(formData, jqForm, options) {
document.getElementByName("exec").value="صبر کنيد";
document.getElementByName("exec").disable = true;
}
function showResponse(responseText, statusText, xhr, $form) {
$(".result").show();
$(".result").fadeIn(1000);
$(".result").html(responseText);
document.getElementByName("exec").value="ارسال شد!";
setTimeout("document.getElementByName('exec').value='ارسال'",3000);
}

کد:

اگر کمی با jQuery آشنا باشید، به سادگی متوجه می شوید که در این کد چه اتفاقی می افتد. ما به jQuery دستور میدهیم که بعد از ارسال فرم (بلافاصله بعد از کلیک کردن روی Submit و هنگام پردازش) دکمه exec یا Submit را غیرفعال می کنیم تا از ارسال مجدد داده ها جلوگیری به عمل آوریم. سپس در تابع دیگر بعد از ارسال اطلاعات و پردازش آن متن واکنش فایل PHP در لایه .result قرار می گیرد.

فعلا چون فایل های php ما وجود ندارند، کد ما کار نخواهد کرد.

این جلسه هم به سلامتی تمام شد.جلسه بعد کار با دیتابیس و PHP را شروع خواهیم کرد.

EhsaanDev · 5/12/11

جلسه چهارم

قبل از شروع کار یک تذکر مهم بدهم که تمامی فایل هایی که ایجاد کردید را به کمک Notepad++ از طریق منوی Encoding بر روی UTF-8 قرار دهید

بالاخره وقت کارکردن با دیتابیس و PHP فرا رسید تا بتوانیم کار Ajaxمان را عملی بسازیم.

خب ما از دیتابیس های قوی mysql و برنامه phpMyAdmin استفاده خواهیم کرد. (اگه phpMyAdmin ندارید،

لینک ها تنها برای اعضای سایت قابل نمایش است.

رو بهتون پیشنهاد می کنم.)

ما هنگام ذخیره سازی لینک، آی پی کاربر و تعداد بازدید آن لینک را ذخیره خواهیم کرد. همچنین به اطلاعتان برسانم که در جلسه آینده با htaccess هم کار خواهیم داشت. جلسه بعد توضیحات کامل را خواهم داد.

خب ما اول باید اطلاعات Database را به اطلاع PHP برسانیم.

خب فایل dbconfig.php را با همان آفتاب پرست خوشگل و اوپن سورس یعنی Notepad++ باز کنید (من اعتقاد زیادی به DreamWaver ندارم ولی خب می توانید از آن هم استفاده کنید) و کدهای زیر را در آن قرار دهید

(کپی پیست ممنوع! خودتان از رویش بنویسید تا متوجه کاربرد دستورات شوید)

<?php
// dbconfig
define("DB_DATABASE","shorter"); // DATABASE NAME
define("DB_HOST","localhost"); // DATABASE HOST
define("DB_USER","root"); // DATABASE USERNAME
define("DB_PASS",""); // DATABASE PASSWORD
// dbconfig

کد:

خب ما می خواهیم کاری کنیم که دیگر در هر فایل نخواهیم به SQL وصل شویم. همچنین تگ php رو هم نبستم تا در ادامه اش این کد را برای راحتی کار قرار دهید.

$res = mysql_connect(DB_HOST,DB_USER,DB_PASS);
if (!$res) {
die("<h1>ERROR ID: 001</h1>");
}
$db = mysql_select_db(DB_DATABASE,$res);
if (!$db) {
die("<h1>ERROR ID: 002</h1>");
}
define("DB_LINK",$db);
?>

کد:

حالا دیگر با هر بار اینکلود شدن، به دیتابیس وصل خواهیم شد. حواستان باشد که تنظیماتی که من برای فایل گذاشتم، مطابق با تنظیمات لوکال خودم است. لطفا اگر فرقی دارد، آن ها را عوض کنید!

Shorter که ما می سازیم یک کد سه رقمی (مثل: x7z) می سازد و به لینک اختصاص می دهد.

حالا نوبت ایجاد دیتابیس است. با Database Manager خود یک دیتابیس با نامی که در فایل dbconfig.php تعیین کردید (ما shorter تعیین کردیم) با Collation (utf8_general_ci) بسازید.

CREATE TABLE IF NOT EXISTS `urls` (
`url` text NOT NULL,
`code` text NOT NULL,
`ip` text NOT NULL,
`visited` int(11) NOT NULL DEFAULT '0'
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

کد:

این یکی رو دیگه اگه کپی پیست کنید اشکال نداره. (چون خودم کپی پیست کردم!!!!!!!)

خب حالا short.php را با همانی که همیشه باز می کردید باز کنید. ما برای جلوگیری از خطاهای احتمالی (اگه تعداد Connectionهای MySQL زیاد میشه به سرور فشار زیادی میاد و هاست شما هم تعطیل میشه) پیش از include فایل dbconfig.php تمامی کانکشن های اخیر را ببند.

<?php
@mysql_close();

کد:

علامت @ هم در اول دستور می گذاریم تا اگر خطایی هست، نمایش داده نشود.

حالا وقت اینکلود dbconfig هست:

<?php
mysql_close();
require_once('dbconfig.php');

کد:

حالا یک متغیر با نام siteurl درست کنید و آدرس دقیق اسکریپت را در آن قرار بدهید. دقت کنید:

<?php
..........
$siteurl = "http://localhost/shorter/";

کد:

شما هم بسته به فولدری که ایجاد کردید این نشانی را تغییر دهید.

حالا یک تابع برای ایجاد کد سه رقمی تصادفی می نویسیم.

<?php
..............
function genRandomString() {
$length = 3;
$characters = '0123456789abcdefghijklmnopqrstuvwxyz';
$string = '';
for ($p = 0; $p < $length; $p++) {
$string .= $characters[mt_rand(0, strlen($characters))];
}
return $string;
}

کد:

حالا تمام اطلاعاتی را که می خواهیم ذخیره کنید در متغیرها قرار می دهیم.

<?php
.................
$url = $_REQUEST['url'];
$code = genRandomString();
$ip = $_SERVER['REMOTE_ADDR'];
$visited = 0;

کد:

حالا کوئری را اجرا کنید!!!

$sql = "INSERT INTO urls VALUES ('$url','$code','$ip','$visited')";
$res = mysql_query($sql);
if (!$res) {
die("خطا در نوشتن فیلد");
} else {
die("لینک شما با موفقیت کوتاه شد! <a href='$siteurl$code'>$siteurl$code</a>");
}
?>

کد:

خب این هم از جلسه چهارم که به سلامتی تمام شد.

فایل اسکریپت را تا جلسه پنجم قرار نمی دهم تا خودتان بنویسید و یاد بگیرید.

EhsaanDev · 5/12/11

جلسه آخر

آخرین فایلی که ما قصد ویرایش آن را داریم go.php که می خواهیم go.php ابتدا آدرس URL اصلی را از دیتابیس بگیرد، سپس تعداد فیلد visited را یک واحد اضافه و به URL اصلی کاربر را ریدایرکت کند.همچنین در این جلسه یک فایل htaccess ایجاد خواهیم کرد که آدرس: xxx.com/go.php?id=zzz را به xxx.com/zzz تبدیل کند.

go.php را با آفتاب پرست خوشگل و مهربانمان یعنی Notepad++ باز می کنیم. مثل قبل ابتدا تمامی کانکشن های اخیر mysql را بسته و فایل dbconfig.php را اینکلود می کنیم.

<?php
@mysql_close();
require 'dbconfig.php';

کد:

خب درخواست ID را بررسی می کنیم.

<?php
..............
if ($id == NULL) {
die("<h1>Please Enter ID</h1>");
}

کد:

حالا یک کوئری MySQL برای بدست آوردن URL اصلی اجرا می کنیم و مقدار بازگشت را در متغیر url می ریزیم.

<?php
.....................
$sql = "SELECT url FROM urls WHERE code='$id'";
$res = mysql_query($sql);
if (!$res) {
die("<h1>Error in Database</h1>");
}
$url = mysql_result($res,0);

کد:

حالا مقدار visited قبلی را بدست آورده، یک واحد به آن اضافه و فیلد را بروز رسانی می کنیم.

$sql = "SELECT visited FROM urls WHERE code='$id'";
$res = mysql_query($sql);
if (!$res) {die("<br /><h1>Error in Database</h1>");}
$visited = mysql_result($res,0);
$visited++;
$sql = "UPDATE urls SET visited='$visited' WHERE code='$id'";
$res = mysql_query($sql);
if (!$res) {die("<h1>Error in Database</h1>");}

کد:

حال کاربر را به URL اصلی هدایت می کنیم!!

header("Location:$url");
?>

کد:

به همین راحتی آخرین جزء از کوتاه کننده لینکمان را ساختیم! ولی یک چیز فراموشمان شد! فایل htaccess. ! برای ایجاد فایل با notepad چنین فایلی را بسازید که کاری ندارد. سپس کدهای زیر را در آن بریزید.

RewriteEngine On

RewriteCond %{SCRIPT_FILENAME} !-d
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteRule ^(\w+)$ ./go.php?id=$1

کد:

خب به همین راحتی ما یک کوتاه کننده لینک ساختیم! اگر برنامه نویس متوسطی هستید می توانید حتی یک Admin Panel هم برای آن بسازید.

برای راحتی کار من تمامی فایل های اسکریپت را برای دانلود قرار می دهم. فایل پیوست شد.

امیدوارم این آموزش موردپسند شما قرار گرفته باشد.

You must be registered for see images attach

لینک ها تنها برای اعضای سایت قابل نمایش است.

آموزش ساخت یک کوتاه کننده لینک با php

EhsaanDev

کاربر عضو

EhsaanDev

کاربر عضو

EhsaanDev

کاربر عضو

EhsaanDev

کاربر عضو

EhsaanDev

کاربر عضو

پیوست‌ها