מידע מורחב

  • תאריך
  • שעה 21:09
  • ע"י
  • צפיות 1485
  • תגובות 0
  • דירוג 5 /5
 

ספירת מספר הורדות של קבצים באתר

Jul10
במדריך הפעם נלמד לבנות מערכת המאפשרת לעקוב אחר מספר ההורדות של קבצים. עבור כל קובץ נציג את מספר ההורדות הנוכחי ולינק להורדה. כל קובץ יהווה שורה בבסיס הנתונים ובה נשמור את מספר ההורדות הכולל של הקובץ. בכל לחיצה על הקובץ השורה תתעדכן ואז הדף יועבר להורדת הקובץ המתאים בצורה שקופה למשתמש.


כל הקבצים ישבו תחת תיקייה אחת, כאשר כל קישורי ההורדה יעברו דרך קובץ מנהל אחד ולאחריו השם של הקובץ.

לנוחיותכם הכנתי קובץ דוגמא המרכז את כל המדריך על כל קבציו. להורדה לחץ כאן.


שלב ראשון - HTML

השלב הראשון הוא לשים את קובץ ה- HTML שלנו. נפתח קובץ demo.php ובו נשתמש בכמה Div-ים: file-manager המכיל רשימה לא ממוינת של הקבצים.
<div id="file-manager">
    <ul class="manager">
		<li>
			<a href="download.php?file=Document.doc">
				Document.doc 
				<span class="download-count" title="Downloads count">0</span> 
				<span class="download-label">הורדה</span>
			</a>
		</li>
	</ul>
</div>


שימו לב כי הקישור להורדת הקובץ מקשר לקובץ download.php עם פרמטר של שם הקובץ האמיתי אותו המשתמש בחר להוריד, ובקובץ זה תתבצע השמירה של ההורדה בזמן שתתבצע.

תמונה להמחשה עבור רשימה של מספר קבצים עם קצת עיצוב


שלב שני - עיצוב CSS

אני מציע פה עיצוב בסיסי, אתם מוזמנים לשנות כמובן. פתחו קובץ style.css וכתבו בו את התוכן הבא:
#file-manager{
	background-color:#EEE;
	border:1px solid #DDD;
	margin:50px auto;
	padding:10px;
	width:400px;
}

ul.manager li{
	background:url("img/bg_gradient.gif") repeat-x center bottom #F5F5F5;
	border:1px solid #DDD;
	border-top-color:#FFF;

	list-style:none;
	position:relative;
}

ul.manager li a{
	display:block;
	padding:8px;
}

ul.manager li a:hover .download-label{
	/* When a list is hovered over, show the download green text inside it: */
	display:block;
}

span.download-label{
	background-color:#64B126;
	border:1px solid #4E9416;
	color:white;
	display:none;
	font-size:10px;
	padding:2px 4px;
	position:absolute;
	left:8px;
	text-decoration:none;
	text-shadow:0 0 1px #315D0D;
	top:6px;
	
	/* CSS3 Rounded Corners */
	
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}

span.download-count{
	color:#999;
	font-size:10px;
	padding:3px 5px;
	position:absolute;
	text-decoration:none;
}


החלק הכי מעניין בכל הסיפור הוא label שמוסתר בברירת המחדל ע"י default:none ומוצג במעבר עכבר ע"י display:block, זה מאפשר לנו להציג כפתור הורדה בצורה יפה מאוד ללא שימוש בג'אווה סקריפט. כמו כן השתמשתי גם ב- CSS3 בכדי לעשות פינות עגולות, כך שזה יראה טוב על דפדפנים תומכים.
התוצאה נראית כך:




שלב שלישי - PHP

את רשימת הקבצים המופיעה בדף אנו מקבלים ע"י סריקה של תיקייה הקבצים וקבלה של כל שמות הקבצים הנמצאים שם. לאחר מכן רשימה זו עוברת ללולאה המדפיסה אותם בתוך הרשימה בתווית li. קוד ה- PHP נראה כן:
<?php

// Error reporting:
error_reporting(E_ALL^E_NOTICE);

// Including the DB connection file:
require 'connect.php';

$extension='';
$files_array = array();


/* Opening the thumbnail directory and looping through all the thumbs: */

$dir_handle = @opendir($directory) or die("There is an error with your file directory!");

while ($file = readdir($dir_handle)) 
{
	/* Skipping the system files: */
	if($file{0}=='.') continue;
	
	/* end() returns the last element of the array generated by the explode() function: */
	$extension = strtolower(end(explode('.',$file)));
	
	/* Skipping the php files: */
	if($extension == 'php') continue;

	$files_array[]=$file;
}

/* Sorting the files alphabetically */
sort($files_array,SORT_STRING);

$file_downloads=array();

$result = mysql_query("SELECT * FROM download_manager");

if(mysql_num_rows($result))
while($row=mysql_fetch_assoc($result))
{
	/* 	The key of the $file_downloads array will be the name of the file,
		and will contain the number of downloads: */
		
	$file_downloads[$row['filename']]=$row['downloads'];
}

?>


לאחר קבלת רשימת הקבצים אנו מביאים מבסיס הנתונים את כל השורות, ומבצעים התאמה בין קובץ ובין השורה בבסיס הנתונים וע"י כך יש לנו את מספר ההורדות הנוכחי של הקובץ.


כעת נרצה להדפיס את התוצאות אותן אספנו, נעשה זאת במקום הרשימה הסטטית אותה הראנו בהתחלה כדוגמא:
foreach($files_array as $key=>$val)
{
        echo '<li><a href="download.php?file='.urlencode($val).'">'.$val.' 
                    <span class="download-count" title="Downloaded count">'.(int)$file_downloads[$val].'</span> <span class="download-label">הורדה</span></a>
              </li>';
}



כעת, כשהתצוגה מוכנה לנו נרצה להכין את הקובץ download.php אשר מבצע את העדכון של בסיס הנתונים ולאחר מכן מפנה לקובץ אותו המשתמש רצה להוריד:
<?php

// Error reporting:
error_reporting(E_ALL^E_NOTICE);

// Including the connection file:
require('connect.php');

if(!$_GET['file']) error('Missing parameter!');
if($_GET['file']{0}=='.') error('Wrong file!');

if(file_exists($directory.'/'.$_GET['file']))
{
	/* If the visitor is not a search engine, count the downoad: */
	if(!is_bot())
	mysql_query("	INSERT INTO download_manager SET filename='".mysql_real_escape_string($_GET['file'])."'
					ON DUPLICATE KEY UPDATE downloads=downloads+1");
	
	header("Location: ".$directory."/".$_GET['file']);
	exit;
}
else error("This file does not exist!");


/* Helper functions: */

function error($str)
{
	die($str);
}


function is_bot()
{
	/* This function will check whether the visitor is a search engine robot */
	
	$botlist = array("Teoma", "alexa", "froogle", "Gigabot", "inktomi",
	"looksmart", "URL_Spider_SQL", "Firefly", "NationalDirectory",
	"Ask Jeeves", "TECNOSEEK", "InfoSeek", "WebFindBot", "girafabot",
	"crawler", "www.galaxy.com", "Googlebot", "Scooter", "Slurp",
	"msnbot", "appie", "FAST", "WebBug", "Spade", "ZyBorg", "rabaz",
	"Baiduspider", "Feedfetcher-Google", "TechnoratiSnoop", "Rankivabot",
	"Mediapartners-Google", "Sogou web spider", "WebAlta Crawler","TweetmemeBot",
	"Butterfly","Twitturls","Me.dium","Twiceler");

	foreach($botlist as $bot)
	{
		if(strpos($_SERVER['HTTP_USER_AGENT'],$bot)!==false)
		return true;	// Is a bot
	}

	return false;	// Not a bot
}
?>


בקטע קוד זה אנו מעדכנים את השורה הרצויה במידה. חדי האבחנה שמו לב כי אנו מבצעים בדיקה is_bot המונעת מבוטים של מנועי חיפוש להגיע ללינק ובעצם "להפעיל" אותו ולהעלות את מספר ההורדות למרות שבעצם לא בוצעו הורדות בפועל.


שלב רביעי - MySQL

בסיס הנתונים שלנו יכיל טבלה אחת בודדת שנקרא לה download_manager ותכיל את השדות הבאים:
  • id - מזהה ייחודי
  • filename - שם הקובץ
  • downloads - מספר הורדות


את הטבלה ניתן ליצור בעזרת השאילתא הבאה:
CREATE TABLE `download_manager` (
  `id` int(6) unsigned NOT NULL auto_increment,
  `filename` varchar(128) collate utf8_unicode_ci NOT NULL default '',
  `downloads` int(10) unsigned NOT NULL default '1',
  PRIMARY KEY  (`id`),
  UNIQUE KEY `filename` (`filename`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;



שלב חמישי - jQuery

בשביל לתת למשתמשים תחושה כאילו הכל עובד בזמן אמת נרצה לעדכן את המונה של ההורדות ממש לאחר הלחיצה, או לפחות להראות למשתמש כאילו הוא מעודכן על ידו. צרו קובץ scripts.js שיכיל את קוד הג'אווה סקריפט והכניסו את הקוד הבא:
$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */

	$('ul.manager a').click(function(){
		
		var countSpan = $('.download-count',this);
		countSpan.text( parseInt(countSpan.text())+1);
	});
});



שלב שישי - htaccess

אם שמתם לב עבור מספר סוגי קבצים הדפדפן פותח אותם ישירות בתוכו ולא בחלון הורדה כמו שנרצה. בכדי לפתור את זה אם אתם באפצ'י כנסו לקובץ ה- htaccess והוסיפו את השורות הבאות:
<Files *.*>
ForceType application/octet-stream
</Files>




זהו סיימנו, פשוט לא ?!
אם בכל זאת לא הבנתם משהו או שתרצו לראות הדגמה חיה על המחשב שלכם צירפתי קובץ של כל המדריך הכולל את כל הקוד, שאילתות, עיצוב להורדה מכאן.
עדיין לא נרשמת לאתר ? לחץ כאן להרשמה מהירה
נא המתן...
דירוג


עליך להתחבר כדי להגיב. לחץ כאן להתחברות.