[Starting to learn PHP and HTML] Need help using php!

321System123 · August 11, 2014

So I started learning how to code php with usercake. I then went to use different things like fileNice for directory listing and I went to make a music lister with music player running mainly (EDM) .mp3's.

I have uploaded a copy of my music.php file and I would love some help on how to develop my site further!

https://github.com/321System123/TheBatCave/blob/master/music.php

This is the part I need help developing:

<?php

  function getUploadedFiles($directory){
    $folder = opendir($directory);
    while ($file = readdir($folder)) {
    if($file !== '.' && $file !== '..')
    {
        $filename = $directory.''.$file;
        $file_array[] = array('filename' => $file);
    }
}
return $file_array;
  }

$music = getUploadedFiles('../Music/EDM');

foreach($music as $value)
{
	echo '<div class="well well-sm">';
	echo '<li class="list-group-item list-group-item-success"><div class="alert alert-success" role="alert"><a href="../Music/EDM/'.$value['filename'].'"title="Play .$value" class="sm2_button"></a> '.$value['filename'].'</div></li>';
	echo '<p><a href="../Music/EDM/'.$value['filename'].'"><button type="button" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-headphones"> </span>  Listen</button></a> ';
	echo '<a href="../Music/EDM/'.$value['filename'].'" download><button type="button" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-cloud-download"></span>  Download</button></p></br></a></p>';
	echo '<p><a class="btn btn-default" href="#" role="button">View details »</a></p>';
	echo '</div>';
	}

  ?>

I would love to figure out how to use "echo '<p><a class="btn btn-default" href="#" role="button">View details »</a></p>';" to show time of when song was added, so Time last modified ?

Hopefully I can learn how to set individual counters instead of them being the same for all the songs :/

Here is a link to the site with everything running: http://thebatcave.x10.mx/dev/music.php

Tell me what you think ?

Edited August 11, 2014 by 321System123

fastsol · August 11, 2014

What is it you are having problems with? Showing the time of the file when uploaded or making the button do something when clicked? You need to clarify a bit more as to what you are trying to acheive.

321System123 · August 11, 2014

I am trying to figure out if there is a better method to scan a folder for .mp3 and being able to set individual settings. Right now all that I am doing is scanning a directory and setting links to them, I want to be able to add properties to the files like ratings.

All of those songs have a score of 27 because the code I made is just echoing the tables

EDIT: HERE IS THE MORE UPDATED CODE I USE:

<?php include './vote/init.php' ?>
<?php
/*
UserCake Version: 2.0.2
http://usercake.com
*/

require_once("models/config.php");
require_once("models/header.php");

echo "
<body>
<div id='wrapper'>
<div id='top'><div id='logo'></div></div>
<div id='content'>
<div id='left-nav'>";
?>
<!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">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../favicon.ico">

    <title>TheBatCave</title>
<?php echo ThumbsUp::css() ?>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
	<link href="http://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet" type="text/css">
    <!-- Custom styles for this template -->
    <link href="jumbotron.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/mp3-player-button.css" />
    <!-- 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="/assets/js/ie-emulation-modes-warning.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
	<script type="text/javascript" src="/js/jquery.liveSearch.js"></script>
	<script src="/audiojs/audio.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/assets/js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript" src="script/soundmanager2.js"></script>
<script type="text/javascript" src="script/mp3-player-button.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <!-- HTML5 shim and Respond.js 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]-->
<script>
var TRange = null;
var dupeRange = null;
var TestRange = null;
var win = null;


//  SELECTED BROWSER SNIFFER COMPONENTS DOCUMENTED AT
//  http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html

var nom = navigator.appName.toLowerCase();
var agt = navigator.userAgent.toLowerCase();
var is_major   = parseInt(navigator.appVersion);
var is_minor   = parseFloat(navigator.appVersion);
var is_ie      = (agt.indexOf("msie") != -1);
var is_ie4up   = (is_ie && (is_major >= 4));
var is_not_moz = (agt.indexOf('netscape')!=-1)
var is_nav     = (nom.indexOf('netscape')!=-1);
var is_nav4    = (is_nav && (is_major == 4));
var is_mac     = (agt.indexOf("mac")!=-1);
var is_gecko   = (agt.indexOf('gecko') != -1);
var is_opera   = (agt.indexOf("opera") != -1);


//  GECKO REVISION

var is_rev=0
if (is_gecko) {
temp = agt.split("rv:")
is_rev = parseFloat(temp[1])
}


//  USE THE FOLLOWING VARIABLE TO CONFIGURE FRAMES TO SEARCH
//  (SELF OR CHILD FRAME)

//  If you want to search another frame, change from "self" to
//  the name of the target frame:
//  e.g., var frametosearch = 'main'

//var frametosearch = 'main';
var frametosearch = self;


function search(whichform, whichframe) {

//  TEST FOR IE5 FOR MAC (NO DOCUMENTATION)

if (is_ie4up && is_mac) return;

//  TEST FOR NAV 6 (NO DOCUMENTATION)

if (is_gecko && (is_rev <1)) return;

//  TEST FOR Opera (NO DOCUMENTATION)

if (is_opera) return;

//  INITIALIZATIONS FOR FIND-IN-PAGE SEARCHES

if(whichform.findthis.value!=null && whichform.findthis.value!='') {

       str = whichform.findthis.value;
       win = whichframe;
       var frameval=false;
       if(win!=self)
{

       frameval=true;  // this will enable Nav7 to search child frame
       win = parent.frames[whichframe];

}

    
}

else return;  //  i.e., no search string was entered

var strFound;

//  NAVIGATOR 4 SPECIFIC CODE

if(is_nav4 && (is_minor < 5)) {
   
  strFound=win.find(str); // case insensitive, forward search by default

//  There are 3 arguments available:
//  searchString: type string and it's the item to be searched
//  caseSensitive: boolean -- is search case sensitive?
//  backwards: boolean --should we also search backwards?
//  strFound=win.find(str, false, false) is the explicit
//  version of the above
//  The Mac version of Nav4 has wrapAround, but
//  cannot be specified in JS

 
        }

//  NAVIGATOR 7 and Mozilla rev 1+ SPECIFIC CODE (WILL NOT WORK WITH NAVIGATOR 6)

if (is_gecko && (is_rev >= 1)) {
   
    if(frameval!=false) win.focus(); // force search in specified child frame
    strFound=win.find(str, false, false, true, false, frameval, false);

//  The following statement enables reversion of focus 
//  back to the search box after each search event 
//  allowing the user to press the ENTER key instead
//  of clicking the search button to continue search.
//  Note: tends to be buggy in Mozilla as of 1.3.1
//  (see www.mozilla.org) so is excluded from users 
//  of that browser.

    if (is_not_moz)  whichform.findthis.focus();

//  There are 7 arguments available:
//  searchString: type string and it's the item to be searched
//  caseSensitive: boolean -- is search case sensitive?
//  backwards: boolean --should we also search backwards?
//  wrapAround: boolean -- should we wrap the search?
//  wholeWord: boolean: should we search only for whole words
//  searchInFrames: boolean -- should we search in frames?
//  showDialog: boolean -- should we show the Find Dialog?


}

 if (is_ie4up) {

  // EXPLORER-SPECIFIC CODE revised 5/21/03

  if (TRange!=null) {
	  
   TestRange=win.document.body.createTextRange();
 
	  

   if (dupeRange.inRange(TestRange)) {

   TRange.collapse(false);
   strFound=TRange.findText(str);
    if (strFound) {
        //the following line added by Mike and Susan Keenan, 7 June 2003
        win.document.body.scrollTop = win.document.body.scrollTop + TRange.offsetTop;
        TRange.select();
        }


   }
   
   else {

     TRange=win.document.body.createTextRange();
     TRange.collapse(false);
     strFound=TRange.findText(str);
     if (strFound) {
        //the following line added by Mike and Susan Keenan, 7 June 2003
        win.document.body.scrollTop = TRange.offsetTop;
        TRange.select();
        }



   }
  }
  
   if (TRange==null || strFound==0) {
   TRange=win.document.body.createTextRange();
   dupeRange = TRange.duplicate();
   strFound=TRange.findText(str);
    if (strFound) {
        //the following line added by Mike and Susan Keenan, 7 June 2003
        win.document.body.scrollTop = TRange.offsetTop;
        TRange.select();
        }

   
   }

 }

  if (!strFound) alert ("String '"+str+"' not found!") // string not found

        
}
// -->
</script>
<?php echo ThumbsUp::javascript() ?>
<script>
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
</script>
  </head>

  <body>
  <style>
body
{
        font-family: 'Ubuntu', serif;
background-size: 100% auto; 
background-image:url('http://i.imgur.com/1Yc4UNd.jpg');
}
#jquery-live-search {
	background: #fff;

	padding: 5px 10px;
	max-height: 400px;
	overflow: auto;

	position: absolute;
	z-index: 99;

	border: 1px solid #A9A9A9;
	border-width: 0 1px 1px 1px;

	-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
</style>
      <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      </nav>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">TheBatCave</a>
        </div>
        <div class="navbar-collapse collapse">
          <form class="navbar-form navbar-right" role="form">
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </div>
    <!-- Main jumbotron for a primary marketing message or call to action -->
	<p><br><br>
<div class="alert alert-warning" role="alert">
         <span class="glyphicon glyphicon-warning-sign"></span>   <strong>Please note:</strong> There is no guarantee that the music on here will stay, So make the most of it!
      </div>
    <div class="container">
	<div id='left-nav'>
</div>
      <!-- Example row of columns -->
      <div class="row">
<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Development</a></li>
  <li class="active">Music</li>
</ol>
	  <div class="col-md-4"></div>
        <center><div class="col-md-4">
          <div class="well">
          <h2><FONT COLOR="d63a2b">EDM</FONT></h2>
		  <h5><span class="label label-info">Electronic Dance Music</span></h5></div>
		  <br>
		  <div class="panel panel-default">
  <div class="panel-body">
  <marquee behavior="scroll" direction="left">This site is indevelopment by Dan! He shall lead us to glory!</marquee>
     <button type="button" class="btn btn-default">
      Search for a particular song
   </button>
  </div>
</div>
<br>
          <p><?php

  function getUploadedFiles($directory){
    $folder = opendir($directory);
    while ($file = readdir($folder)) {
    if($file !== '.' && $file !== '..')
    {
        $filename = $directory.''.$file;
        $file_array[] = array('filename' => $file);
    }
}
return $file_array;
  }

$music = getUploadedFiles('../Music/EDM');

foreach($music as $value)
{
	echo '<div class="well well-sm">';
	echo '<li class="list-group-item list-group-item-success"><div class="alert alert-success" role="alert"><a href="../Music/EDM/'.$value['filename'].'"title="Play .$value" class="sm2_button"></a> '.$value['filename'].'</div></li>';
	echo '<p><a href="../Music/EDM/'.$value['filename'].'"><button type="button" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-headphones"> </span>  Listen</button></a> ';
	echo '<a href="../Music/EDM/'.$value['filename'].'" download><button type="button" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-cloud-download"></span>  Download</button></p></br></a></p>';
	echo ThumbsUp::item('Song')->template('up_down');
	print("This song was added by Dan on: ");
	echo '<p><a class="btn btn-default" href="#" role="button">View details »</a></p>';
	echo '</div>';
	}

  ?>
</p>
          <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
		  	  <div class="col-md-4"></div>
       </div>
      </div>
</center>
      <hr>

      <footer>
        <p>© TheBatCave <?php
echo file_exists("fs.jpg");
?></p>
      </footer>
    </div> <!-- /container -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Edited August 11, 2014 by 321System123

fastsol · August 11, 2014

You could use something like this to show the last modified time of the file, taken straight form the php.net

echo $value['filename'] was last modified: " . date ("F d Y H:i:s.", filemtime($value['filename']))

Depending on the actual value of $value['filename'] you may need to edit the path for the filetime() to use it properly.

321System123 · August 12, 2014

Thank you. I will be sure to do this!

Sign In

[Starting to learn PHP and HTML] Need help using php!

Recommended Posts

321System123

Link to comment

Share on other sites

fastsol

Link to comment

Share on other sites

321System123

Link to comment

Share on other sites

fastsol

Link to comment

Share on other sites

321System123

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information