ラジコの録音、東京の放送を取得する一案(9 WEBアプリ

WEBアプリはPerlで簡単に組みました。
単に、mp3フォルダの中身をテーブル組にするだけのものです。
やってみるとわかりますが、ラジオって毎日だったりするのでどんどん溜まっていきます 汗
その為、デリートボタンを各録音ファイルの横に表示するようにしています。
クリックするとunlink(削除)します。削除をCGIから実行するのは結構危険なので、dustとか言うフォルダを作っておいて単に移動させるようにしても良いかもしれません。
実際の削除は時々ログインして自分で消すようにするのです。

#!/usr/bin/perl
use strict;
use CGI;
use Storable qw(nstore retrieve);

my $debug;

my $q=new CGI;
my @param=$q->param;
my %HASH;
for (@param){
$HASH{$_}=$q->param($_);
    $debug.=qq($_ , $HASH{$_} | );
}

my $mes;
if ( -f "./mp3/" . $HASH{'del'} ){
    unlink "./mp3/$HASH{'del'}";
    $mes=qq(./mp3/$HASH{'del'} を削除しました。);
}elsif( $HASH{'del'} ne "" ){
    $mes=qq($HASH{'del'} がありません。);
}

opendir DIR, "mp3";
my @files =
reverse( grep ( /mp3|aac/, readdir DIR ));
close DIR;
#フィルタ
if ( $HASH{'a'} ne "" ){
    @files = grep /$HASH{'a'}/i , @files;
}
my $src;
for my $var (@files){
    $src.=qq(<tr><td><a href="./mp3/$var">$var</a></td><td><button onclick='test("$var")' style="WIDTH:50px; HEIGHT: 20px">del</button></td></tr>\n);
}

if ( -d "debug.flg" ){
    $debug=$debug . "\n<hr>\n";
}else{
    $debug="";
}
print "Content-type: text/html\n\n";
print <<HTML;
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title></title>
<script type="text/javascript">
<!--
function test(msg){
  var element = document.getElementById("1");
  element.value = msg;
}
function ReloadAddr(){
  window.location.reload(); //ページをリロード
}
-->
</script>
</head>
<body>$debug
$mes
<form action="rj.cgi" method="post">
  <input type="text" name="del" size="30" id="1"><input type="submit" value="削除">
  <button onclick='ReloadAddr' style="WIDTH:50px; HEIGHT: 20px">reload</button>
  <a href="#endjump">一番下へ</a>
</form>
<table border="1" cellpadding="0">
$src
</table>
<form action="rj.cgi" method="get">
  <input type="text" name="a" size="30" value=$HASH{'a'}>
  <input type="submit" value="フィルタ"><a name="endjump"><a href="#top">TOP.</a></a>
  <input type="reset" value="riset">
</form>
</body>
</html>
HTML