درس دهم- نمایش فایل و استفاده از جاوا اسکریپت
مقدمه
در
درس قبلی یاد گرفتیم که چطور فایل (عکس) را به سیستم خود انتقال دهیم. در
این درس میخواهیم از این عکسها برای نمایش در تارنما استفاده کنیم و این
نمایش را در قالب یک برگه جدید بنام نمایه (پروفایل) تجربه میکنیم. در
ادامه به ساختن برگهای دیگر میپردازیم که فهرستی از عکسهای ارسال شده٬
بشکل آلبومی ساده ارائه میکند.
نمایه profile.php
در پوشه خود فایلی با نام profile.php بسازید و کدهای زیر را در آن قرار دهید:
<?php
session_start();
if(isset($_SESSION['first_name']))
{ $name = $_SESSION['first_name'];
$page_title = ' نمایه ' . $name;
}else{
$page_title = ' نمایه ' ;
}
include ('includes/header.html');
?>
<?php
if(isset($_POST['id']) && is_numeric($_POST['id'])){
$id = $_POST['id'];
}
elseif(isset($_GET['id']) && is_numeric($_GET['id']))
{
$id = $_GET['id'];
}else{
echo 'دسترسی به این برگه برای شما مقدور نیست!';
//header('LOCATION: index.php');
header('REFRESH: 3; URL= index.php');
}
require_once('db_connection.php');
$query = "SELECT * FROM users WHERE id='$id'";
$result = mysqli_query($dbc, $query);
if(mysqli_num_rows($result) == 1)
{
$row = mysqli_fetch_array($result, MYSQLI_ASSOC) ;
?>
<div id="profile">
<div id="image">
<?php
if($row['image']){
echo '<img src="uploads/'. $row['image'] . '" width="180" height="180"/>';
}?>
</div>
<div id="user-info">
<ul>
<li><span>نام </span><h3><?php echo $row['first_name']; ?></h3></li>
<li><span>نام خانوادگی </span><h3><?php echo $row['last_name']; ?></h3></li>
<li><span> شناسه کاربری </span><h3><?php echo $row['username']; ?></h3></li>
<li><span> رایانامه </span><h3><?php echo $row['email']; ?></h3></li>
</ul>
</div>
</div>
<?php}?>
<?php include ('includes/footer.html'); ?>
همانطور که مشاهده میکنید٬ این برگه را با تابعsession_start() آغاز کردیم٬ چرا که میخواهیم از مقادیر داخل سشن استفاده کنیم. از آنجا که این برگه برای هر کاربر دادههای مربوط به آن کاربر را نمایش میدهد٬ میخواهیم نام برگه را هم در صورت وجود به نام کاربر در کنار عبارت «نمایه» اضافه کنیم.
if(isset($_SESSION['first_name']))
{ $name = $_SESSION['first_name'];
$page_title = ' نمایه ' . $name;
}else{
$page_title = ' نمایه ' ;
}
در این شرطی بررسی میشود که در صورت وجود نام کاربر از آن استفاده شود٬ در غیر اینصورت فقط عبارت «نمایه» آورده شود٬ چرا که در صورت وارد نشدن کاربر به سیستم٬ داخل سشن مقداری وجود ندارد و اگر ما این شرطی را نداشته باشیم٬ با خطای خالی بودن سشن مواجه میشویم.
if(isset($_POST['id']) && is_numeric($_POST['id'])){
$id = $_POST['id'];
}
elseif(isset($_GET['id']) && is_numeric($_GET['id']))
{
$id = $_GET['id'];
}else{
echo 'دسترسی به این برگه برای شما مقدور نیست!';
//header('LOCATION: index.php');
header('REFRESH: 3; URL= index.php');
}
همانطور که گفته شد٬ این برگه مختص کاربر وارد شده به سیستم است٬ این وقتی کاربر وارد این برگه میشود باید شماره کاربری او هم فرستاده شود. این عمل را با فرستادن شماره کاربری توسط پیوند ارجاع دهنده انجام میدهیم (این قسمت را در ادامه و در بخش تغییرات سرایند مشاهده میکنیم).
if( isset($_POST['id']) && is_numeric($_POST['id'])) {
$id = $_POST['id'];
} elseif(isset($_GET['id']) && is_numeric($_GET['id']))
{
$id = $_GET['id'];
} else {
echo 'دسترسی به این برگه برای شما مقدور نیست!';
//header ('LOCATION: index.php');
Header ('REFRESH: 3; URL= index.php');
}
این قسمت کد٬ شماره ارسالی کاربر را گرفته و در متغییر $idقرار میدهد٬ البته در صورت عدم ارسال و وجود شماره٬ بازدید کننده به برگه خانه هدایت میشود.
بعد از اتصال به پایگاه دادهها و دریافت اطلاعات هر کاربر٬ این اطلاعات را چاپم میکنیم٬ تنها کدی که تا بحال در مورد آن توضیح ندادهایم٬ کد نمایش عکس است. باقی کدها چندین بار معرف حضور بودهاند:
if($row['image']){
echo '<img src="uploads/'. $row['image'] . '" width="180" height="180"/>';
}
اگر یادتان باشد در درس قبلی٬ وقتی فایلی را به پوشه uploads ارسال میکردیم٬ نام فایل را در خانه عکس مربوط به رکورد هر کاربر قرار دادیم٬ حال با دسترسی به آن خانه٬ عکس را نمایش میدهیم. تنها کار گرفتن نام عکس از پایگاه و قرار دادن آن همراه آدرس پوشه در قسمت نشانی برچسب نمایش دهنده عکس است.
تغییر در سرایند
میخواهیم پیوندی با «نام کاربر» به فهرست راهنما اضافه کنیم تا دسترسی به
برگه نمایه براحتی صورت پذیرد. برای این کار فایل سرایند را کمی تغییر
داده و پیوند مورد نظر را به آن اضافه میکنیم:
<li>
<a href="<?php echo 'profile.php?id=' . $_SESSION['user_id']; ?>">
<?php echo $_SESSION['first_name']; ?>
</a>
</li>
<li><a href="view.php"> کاربران </a></li>
<li><a href="password.php"> بروزرسانی رمز </a></li>
<li><a href="upload_image.php"> ارسال عکس </a></li>
همانطور که از کد پیداست٬ پیوند نمایه را در بالای دیگر پیوندهای فهرست٬ در قسمت else قرار دادهایم. با این وجود این پیوند تنها در حال ورود کاربر قابل مشاهده است.
تغییر سیاساس CSS
کدهای زیر را در برگه سیاساس خود اضافه کنید:
/* قسمت نمایش نمایه پروفایل */
#profile{border:0px solid #999; width:90%; margin:25px auto; overflow:hidden;}
#image{border:0px solid #999; margin:0px; float:right;}
#profile img{border:1px solid #ddd; padding:2px;}
#user-info{border:0px solid #999; width:65%; margin:0px; float:left;}
#user-info ul{border:0px solid red; list-style:none;}
#user-info li span{margin: 0 5px 0 80px; color:#777;}
#user-info li{border:0px solid green; list-style:none; margin:15px auto;}
#user-info li h4{color:#999;}
حال باید در زمان ورود کاربر پیوندی که با نام او ساخته شده را دیده و در صورت فشار دادن آن به برگه نمایه برود:
نام کاربر وارد شده در تصویر بالا «پیمان» است که در برگه نمایه مشخصات او چاپ میشود.
برگه آلبوم
حال فرض کنید که میخواهیم٬ برگه داشته باشیم که در آن
برگه تمام عکسهای کاربران بطور آلبوم وار به نمایش در آیند. البته این کار
در دنیای واقعی به این شکل صورت نمیگیرد. هدف در اینجا فقط نشان دادن این
مطلب است که شما میتوانید با در دست داشتن اطلاعات در پایگاه٬ به هر شکل
از آنها استفاده کنید. در قدم بعدی میخواهیم این برگه آلبوم٬ عکسها را
طوری نمایش دهد که هر عکس خود پیوندی به برگه دیگر باشد که در این برگه٬
عکس مورد نظر با اندازه بزرگتر و بطور مجزا به نمایش درآید. برای انجام این
کار از جاوا اسکریپت بهره میبریم. هدف نشان دادن راه بهره بردن از
جاوااسکریپت در پیاچپی است.
فایل تابع جاوا اسکریپت function.js
برگهای با نامfunction.js در داخل پوشه includes
بسازید و کدهای زیر را در آن بگذارید. در مورد این کدها تنها اشاره
میکنیم که٬ این کدها قابلیتی به عکسها میدهند که با انتخاب آنها عکسها
در برگهای تازه باز شوند.
function create_window (image, width, height) {
width = width + 10;
height = height + 10;
if (window.popup && !window.popup.closed) {
window.popup.resizeTo(width, height);
}
var specs = "location=no, scrollbars=no, menubars=no, toolbars=no, resizable=yes, left=100, top=100, width=" + width + ", height=" + height;
var url = "show_image.php?image=" + image;
popup = window.open(url, "ImageWindow", specs);
popup.focus();
}
برای استفاده از این فایل جاوا اسکریپت باید آدرس این فایل را در فایل سرایند قرار دهیم:
<head>
<script src="includes/function.js"></script>
</head>
این آدرس را در داخل دو برچسب<head></head> در فایل header.html قرار دهید.
ساخت فایل images.php
برگهimages.php برای نمایش همه عکسها در یک صفحه
ساخته میشود٬ این برگه را در کنار دیگر فایلها در ریشه تارنما بسازید و
کدهای زیر را در آن قرار دهید:
<?php
session_start();
$page_title = ' آلبوم ';
include ('includes/header.html');
date_default_timezone_set ('Asia/Tehran');
$dir = 'uploads'; // آدرس پوشه قرار دارنده فایلها
$files = scandir($dir); // ریختن فایلها در آرایه
echo '<div id="view">';
// نمایش عکسها با پیوند به تابع جاوا اسکریپت
foreach ($files as $image) {
if (substr($image, 0, 1) != '.') { // ندیدن هر چیزی که با نقطه . شروع میشود
$image_size = getimagesize ("$dir/$image");
// گرفتن زمان ارسال عکسها
$image_date = date(" F D, Y ", filemtime("$dir/$image"));
// تبدیل کاراکترها نام عکسها به حالتی که بتوان با آدرس فرستاد
$image_name = urlencode($image);
$chunks = explode(".", $image_name);
$imagename=$chunks[0];
echo '<ul class="image-list">';
echo "<li class='image-single'>
<a href="javascript:create_window('$image_name',$image_size[0],$image_size[1])" title="$imagename" >
<img src="uploads/$image" width="150" height="150" />
</a> </li>
<li class='image-single'> ($image_date)</span>
</li> ";
echo '</ul>';
}
} echo '</div>';
?><?php include ('includes/footer.html'); ?>
شرح کدهای برگه images.php
$dir = 'uploads'; // آدرس پوشه قرار دارنده فایلها
$files = scandir($dir); // ریختن فایلها در آرایه
ابتدا آدرس پوشه دربردارنده عکسها را به یک متغییر میدهیم و بعد با تابعscandir() تمام فایلها این پوشه را در یک آرایه قرار میدهیم.
foreach ($files as $image) {
if (substr($image, 0, 1) != '.') {
بعد با دستورforeach هر کدام از موارد این آرایه را جدا بررسی میکنیم و اطلاعات مربوط به آن را در متغییر میریزیم. با کمک تابعsubstr() فقط مواردی را در نظر میگیریم که با نقطه «.» شروع نشدهاند.
$image_date = date(" F D, Y ", filemtime("$dir/$image"));
// تبدیل کاراکترها نام عکسها به حالتی که بتوان با آدرس فرستاد
$image_name = urlencode($image);
$chunks = explode(".", $image_name);
$imagename=$chunks[0];
در این قسمت ابتدا تاریخ ارسال فایل را گرفته و در متغییری قرار میدهیم٬ در ادامه نام فایل را از طریق تابع urlencode()به حالتی تبدیل میکنیم که بتوان از آن در نشانی استفاده کرد. دلیل این کار این است که در زمان ساخت آدرس یا همان URL بعضی از کاراکترهای واقع در نام عکس خوانده نمیشوند٬ این بدان دلیل است کهURL تنها با کاراکترهای اسکی ASCII ساخته میشوند و در داخل نام فایل عکس ممکن است کاراکتری غیر از کاراکتر اسکی باشد٬ پس آدرس به حالتی که اسکی آن را بشناسد تبدیل میشود.
echo '<ul class="image-list">';
echo "<li class='image-single'>
<a href="javascript:create_window('$image_name',$image_size[0],$image_size[1])" title="$imagename" >
<img src="uploads/$image" width="150" height="150" />
</a> </li>
<li class='image-single'> ($image_date)</span>
</li> ";
echo '</ul>';
حال باید برچسب عکس را در داخل پیوندی که به جاوا اسکریپت اشاره دارد قرار دهیم٬ این پیوند تابع Create_Window را که در فایلfunction.js است فراخوانی میکند.
برگه نمایش هر عکس show_image.php
برگه نمایش دهنده هر عکس در اصل همان برگهای است که با کلیک هر کس باز میشود و فقط شامل عکس است. فایلی با نام show_image.php ساخته و در پوشه اصلی و در کنار دیگر فایلها قرار دهید. کدهای زیر را در آن بنویسید:
<?php
$name = FALSE;
if (isset($_GET['image'])) {
$ext = strtolower ( substr ($_GET['image'], -4));
if (($ext == '.jpg') OR ($ext == 'jpeg') OR ($ext == '.png')) {
$image = "uploads/{$_GET['image']}";
if (file_exists ($image) && (is_file($image))) {
$name = $_GET['image'];
}
}
}
if (!$name) {
$image = 'images/unavailable.png';
$name = 'unavailable.png';
}
$info = getimagesize($image);
$fs = filesize($image);
header ("Content-Type: {$info['mime']} ");
header ("Content-Disposition: inline; filename="$name" ");
header ("Content-Length: $fs ");
readfile ($image);
?>
این برگه در اصل از داخل تابعcreate_window() که در داخل فایل function.js است٬ برای نمایش هر عکس بطور مجزا و بصورت باز شدن پنجره تازه خوانده میشود.
if (isset($_GET['image'])) {
$ext = strtolower ( substr ($_GET['image'], -4));
if (($ext == '.jpg') OR ($ext == 'jpeg') OR ($ext == '.png')) {
$image = "uploads/{$_GET['image']}";
if (file_exists ($image) && (is_file($image))) {
$name = $_GET['image'];
}
}
}
ابتدا نام فایل را گرفته و سپس پسوند آن را با پسوندهای داده شده برابری میکند٬ این بخاطر این است که ما میخواهیم عکسهایی با پسوند نام برده شده نمایش دهیم.
if (!$name) {
$image = 'images/unavailable.png';
$name = 'unavailable.png';
}
در صورت عدم وجود عکس٬ یک عکس پیش فرض نمایش میدهد. این عکس را در پوشه دیگری به نام images با نام unavailable.png قرار میدهیم.
$info = getimagesize($image);
$fs = filesize($image);
header ("Content-Type: {$info['mime']} ");
header ("Content-Disposition: inline; filename="$name" ");
header ("Content-Length: $fs ");
readfile ($image);
حال اطلاعات سایز عکس را گرفته و سرایندهایی برای تعیین نوع برگه نمایش دهنده فایل به مرورگر میفرستیم.
فراموش نکنید که باید پیوند برگه «آلبوم» را هم در سرایند تارنما header.html قرار دهید:
<li><a href="upload_image.php"> ارسال عکس </a></li>
<li><a href="images.php"> آلبوم </a></li>
بعد از قرار دادن پیوند باید بتوانید آن را در فهرست ببینید و با کلیک بر آن تمام عکسهای ارسال شده را همانند یک آلبوم در برگه «آلبوم» مشاهده کنید.
در این درس به ساخت برگه نمایه برای نمایش اطلاعات هر کاربر به همراه عکس آن پرداختیم٬ البته این برگه آخرین عکس ارسالی را به عنوان عکس نمایه بر میگزیند. اگر میخواهید این بخش را از عکسهای آلبوم جدا کنید باید پوشهای دیگر برای ارسال عکس نمایه بسازید٬ که انجام آن به عهده خودتان است.
ساخت برگه آلبوم کار زیاد سختی نبود و در ادامه با استفاده از جاوا اسکریپت در صفحه آلبوم حالتی را ایجاد کردیم که با فشردن هر عکس٬ پنجرهی تازهای آن عکس را نمایش دهد.
در درس بعدی کمی به امنیت در سیستم خود میپردازیم.
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.