Forum Moderators: coopster

Message Too Old, No Replies

Design Index Of. Page

Design Index Of.... Page

         

TheKiller

12:02 pm on Oct 7, 2010 (gmt 0)

10+ Year Member



Greetings Everyone

i would want to Design a Index page that displays files that are inside a folder...

i am not sure if i posted right here as its a Apache question also

Here is the page i would like to design ..
[69.90.34.145...]

make the background black etc

if i make a index page how may i list the files ?

hope i made myself understood and havent confused anyone lol

Thanks

Anyango

7:05 pm on Oct 7, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi TheKiller

Do you want to do it only with HTML or you want to code PHP ?

TheKiller

9:51 pm on Oct 7, 2010 (gmt 0)

10+ Year Member



Hi Anyango

um ... i dont really care
either way is fine with me

i guess if i want to make it in HTML It will use some PHP Script embed on page anyways

whatever you consider right :)

Anyango

2:27 pm on Oct 8, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You could start like

<?php
if ($handle = opendir('.')) {
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {
echo "$file\n";
}
}
closedir($handle);
}
?>

source: [php.net...]

this will list all the files present in your directory, can then use html to make it look cleaner.

To have black background of the page you could use

<body bgcolor="#000000">

TheKiller

4:45 pm on Oct 8, 2010 (gmt 0)

10+ Year Member



Thank you Anyango

i will have a look on it later

do you by any chance have a tutorial or script on how to make a PHP Page with more pages and load them with a id ?

like www.#*$!#*$!x.com/index.php?pageone=1


should be something like

<? if (isset($_GET['Page1'])) {

echo "This is Page One" !;
}
?>

<? if (isset($_GET['Page2'])) {

echo 'This is Page Two !';
}
?>


but i would love to see a example

Matthew1980

5:24 pm on Oct 8, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi all


<?php

//set the page handling var, and put a default (in this example I have used '1')
$page = ((isset($_GET['Page1']) && !empty($_GET['Page1'])) ? strip_tags($_GET['Page1']) :'1');

//load content depending on value in $page

if($page == 1){
include("path/to/dir/page1.php");//<- this *should* be the default page IF the $_GET isn't set...
}
elseif($page == 2){
include("path/to/dir/page2.php");
}
elseif($page == 3){
include("path/to/dir/page3.php");
}
else{
//set an error handler, though in theory this should be invoked, but always good to handle errors
include("path/to/dir/error_page.php");
}

?>


Something like that would do the job admirably, so have a play with that, and see how you get on, also, it's good to define the root directory so that the filepath can be a constant throughout your script.

Cheers,
MRb

Anyango

5:35 pm on Oct 8, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



lets say you have a template for your web pages, stored in a variable



now lets say you have 4 pages
page1
page2
page3
contact

so you can link to them like this

example.com/index.php?page=page1
example.com/index.php?page=page2
example.com/index.php?page=page3
example.com/index.php?page=contact

(this code we are writing resides on index.php)

now we can do this



<?php
$template="
<html>
<head>
<title>#title#</title>
</head>
<body>
#content#
</body>
</html>
";

if(isset($_GET["page"]))
{
$page=$_GET["page"];
}
else
{
die("no page requested");
}

/*
now remember your html template is on variable named $template
*/


if($page=="page1")
{
$title="Title of Page 1";
$content= "content for page 1 here, you can even call a function which returns you content, loads of it";
}
elseif($page=="page2")
{
$title="Title of Page 2";
$content= "content for page 2 here";
}
elseif($page=="page3")
{
$title="Title of Page 3";
$content= "content for page 3 here";
}
elseif($page=="contact")
{
$title="Contact US";
$content= "make your contact form here";
}
else
{
$title="Page not Found";
$content="We do not have this page on our site";
}

/*
now we simply replace the markers in our template with these variables
*/

$template=str_replace("#title#",$title,$template);
$template=str_replace("#content#",$content,$template);

echo $template;
die();
?>

There you go ;)

Anyango

5:38 pm on Oct 8, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



oops, Matthew posted your answer while i was typing, Sorry to MRb ! didnt mean to post a duplicate answer

TheKiller

6:50 pm on Oct 8, 2010 (gmt 0)

10+ Year Member



hmmmmm
when i try any of your scripts or the example i wroted it asks me to save the php file

i run wamp server so i can run php pages


i can run other php files but not this

Anyango

6:55 pm on Oct 8, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



In this same file you created for these codes, can you remove the code and run any simple php command to see ? i believe you get file download notification only when server isnt set up to run php. but if you confirm that this does not happen with any other code then we can try looking for reasons

g1smd

6:35 am on Oct 9, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



so you can link to them like this

example.com/index.php?page=page1


Don't link to "index.php". There is no need to expose your technology to users.

example.com/index.php?page=page1 is a duplicate of example.com/?page=page1

example.com/index.php?page=page1&randomjunk is a duplicate of example.com/?page=page1

Link to example.com/p-1 instead and set up a RewriteRule in the .htaccess file to pull content from the internal script at /index.php?page=page1.

It's more robust, eliminates the potential for Duplicate Content, "hides" your technology, allows you to change the technology in the future while keeping the same URLs, and avoids multiple problems inherent with parameter-based URLs, and so on.

Anyango

6:37 am on Oct 9, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yep agreed, i do that too. I just put index.php in there so that he doesnt get confused as to what is being linked

astupidname

9:45 am on Oct 10, 2010 (gmt 0)

10+ Year Member



want to Design a Index page that displays files that are inside a folder...
....
as its a Apache question also
....
make the background black etc


Well, you are correct there, it can be done with apache which already provides some nice sorting abilities as well as options such as making sure folders are displayed first (if desired) etcetera. Use the IndexOptions directive in combination with the HeaderName and ReadmeName directives to accomplish what you want (gaining control of the styling).
To give you a useful example here, some homework for you first.
In the root of your site, create a folder named "fancyIndexingFiles".
Then place the following file in the fancyIndexingFiles folder and name it "header.html":

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Directory Listing</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html{
background-color:black;
}
body{
color:white;
width:800px;
margin:0 auto;
font-family:Arial,Helvetica;
}
table{
border:2px solid green;
margin:0 auto;
background-color:darkslategray;
font-family:"Courier New";
}
td{
padding:0 8px;
}
td a{
margin-left:6px;
color:darkturquoise;
font-family:"Times New Roman",Times;
}
td a:hover{
text-decoration:none;
}
th a,th a:visited{
color:chartreuse;
}
#content{
width:800px;
text-align:left;
}
img{
border:0;
}
</style>
<script type="text/javascript">
window.onload = function () {
var i,
links = document.getElementsByTagName('a'),
div = document.getElementById('content'),
h2 = document.createElement('h2');
for (i = 0; i < links.length; i++) {
if (!links[i].title.length) {
links[i].title = links[i].href.match(/[^\/]+\/?$/);
}
}
//h2.style.color = 'red';
div.insertBefore(h2, div.childNodes[0]);
h2.appendChild(document.createTextNode('Index Of: '+ window.location.pathname));
};
</script>
</head>
<body>
<div id="content">



Then, place the following file in the fancyIndexingFiles folder and name it "endPage.html":

<h1 style="color:red;">endPage.html</h1>
</div>
</body>
</html>


O.k, that takes care of that, apache will fill the parts in between the contents of the header.html and endPage.html contents, all that's left to do is if you do not already have a .htaccess file in your "Cosmo-Maps" directory place the following file in the Cosmo-Maps directory and name it ".htaccess" (if you do already have one, edit it to remove any directives which may conflict with the following and add the following in):

Options All

IndexOptions FancyIndexing NameWidth=40 FoldersFirst IconsAreLinks HTMLTable SuppressHTMLPreamble

HeaderName /fancyIndexingFiles/header.html
ReadmeName /fancyIndexingFiles/endPage.html

AddDescription "<a href=\"http://www.google.com/search?hl=en&q=.rar file\" title=\".rar file info\">WINRAR File</a>" .rar
AddDescription "PHP File" .php
AddDescription "Plain Text File" .txt
AddDescription "HTML File" .html .htm

AddAlt "Icon" *.html *.php *.txt *.xml *.csv
AddAlt "rar file icon" *.rar


Then, if you wish to display a custom icon such as for .rar files, hit google and do a search for ".rar file icon" find an icon you like to represent .rar files, photoshop it down to a size no taller than about 20px then upload it to your fancyIndexingFiles directory and name it "RAR_icon_small.gif". Then you can add the following directive in to the .htaccess file:
AddIcon /fancyIndexingFiles/RAR_icon_small.gif .rar


And bingo, there you go, complete control of the styling. Of course, edit the styles in the header.html file as desired. The javascript I included in header.html is not needed either, just some utility demo there. Also, for more info see: apache mod_autoindex [httpd.apache.org]
Note, of course, the AddIcon and AddDescription and AddAlt directives I included above are not necessary, just added in for demo.
Note also the HTMLTable option of IndexOptions requires apache version 2.0.23 or greater, which won't be a problem as you are running 2.2.11 (according to the 'Net' panel in firebug).

TheKiller

3:57 pm on Oct 11, 2010 (gmt 0)

10+ Year Member



WoW !
that was Exactly what i was looking for mate !

Thank you very much for that
i like the template colours too :)
so ill let them like that for now
here is what i came out with [69.90.34.145...]

Can you please tell me how may i exclude the endfile.html from being indexed ?

and how may i add a description for folders

Thank You

astupidname

5:53 pm on Oct 11, 2010 (gmt 0)

10+ Year Member



Hi, glad you liked!
I don't see the enfile.html being indexed. I believe if you don't want a particular file/or group of file types indexed you could try the IndexIgnore directive in the link I gave it is explained a bit.
As for adding description for folders, don't know any other way than to add another AddDescription directive, AFTER all the other AddDescription directives, which would be like so ( * is the "wildcard" symbol, meaning all):
AddDescription "Could be a folder?" *

That will assign that description to all files/folders which do not have a description already assigned, so you should make sure to add descriptions for all possible file types first, then add your folder description as above.
Enjoy, I like the icons and what you did with it!

TheKiller

6:22 pm on Oct 11, 2010 (gmt 0)

10+ Year Member



the end file i was talking about was the endpage.html (i thought it was end file.html)

but i renamed it to footer.html and i dont want it to be indexed on the page same as the images/ folder...
i am not sure i understand what they say in there...

should i make it like this?

IndexIgnore footer .htaccess *.html *~
IndexIgnore images .htaccess /*


Thank you for your kind words :)


EDIT :
Is there no way to just add a description on the folders and not only all files without a description ?

like add the folder description only on if the folder has a slash (/) at the end of the name

alike this: AddDescription "Folder" /

astupidname

7:15 am on Oct 12, 2010 (gmt 0)

10+ Year Member



About the footer.html file, thing I'm just curious about is why you have it in that directory? I don't see the header.html file so you must have stored that in a different location as I had laid out, why not just put the footer file there too? Not that it matters, was just wondering.

About the IndexIgnore thing, in your case it sounds like you want to do:
IndexIgnore footer.html images

Unless you want to ignore all .html files, then do:
IndexIgnore *.html images

Files which have no name, just an extension (such as a file named ".htaccess" or ".zzzz" or ".001" etc.) are ignored by default (and I don't even think there is a way to force indexing of unnamed files), so should not need to do an IndexIgnore for .htaccess at all.

About your question about the folder descriptions, no, not that I'm aware of. Although you can add descriptions by the name of the folder or file, though this would probably get a bit laborious. For example, if you added this in to your .htaccess file it would give a particular description for the Ramses folder:
AddDescription "Ramses Folder" Ramses

There are of course options using javascript to dynamically set descriptions instead if desired. What is your intent? Sounds like you don't want descriptions for files but maybe just for some/all folders?

astupidname

7:54 am on Oct 12, 2010 (gmt 0)

10+ Year Member



Incidentally, about the icons for .rar files, just realized rarlab (home of WinRAR) has the default ones on their site available for download -click "Other" on their menu, then "Logos" and there they are.

TheKiller

4:51 pm on Oct 12, 2010 (gmt 0)

10+ Year Member



i have the header and footer in the same folder that being the link i gave you

the header must not display as a file because it displays as a main index page :P

IndexIgnore footer.html images
seem to solve my issue
so its :IndexIgnore fileone.ext filetwo.ext
etc.....

ignoring .htaccess was not my intension .. i just didnt had a clue what indexignore worked as..


i just want folders to have a Folder Description ...
dosnt apache read it as folder by just the slash ? slash being as a extension


thanks for the info about the icon
i will check it later :-)

TheKiller

7:39 am on Oct 30, 2010 (gmt 0)

10+ Year Member



Hi Again ! lol

@Matthew1980

i like the way your script is wroten as its shorter and simple (i apreciate Anyango's help too )

but as i said it b4 ... when i try to run it it forces my browser to download the php file

i can run PHP Files... but i cant run this for some reason .. idk what could be wrong

@G1SMD

I Would like it even more to link to pages as you said
http://example.com/P-1


I Hope you guys are still around to reply :)

TheKiller

1:04 pm on Nov 1, 2010 (gmt 0)

10+ Year Member



O-O'
Anyone.....?

Matthew1980

7:03 pm on Nov 1, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there TheKiller,

Well, if the code excerpt I gave is in a php type file, and you are running in from the htdocs/wwww folder of your chosen server environment (wamp/xamp/lamp etc) and accessed via your localhost address, then it should function fine, as I have a few scripts that I have structured just like that, so I know as the logic is sound ;)

I guess if the browser is forcing a file download, then your server environment isn't set up correctly; though I am surmising a that.

Have you actually tested your php install to see if it functions as you would expect, try running a simple script:-

<?php
phpinfo();
?>

this will display your current settings and other aspects of your php install IF it has been done correctly, if not, then your going to get unexpected behaviour depending on browser your are using..

Sorry I can't be much more help anyway.

Cheers,
MRb

TheKiller

10:18 am on Nov 4, 2010 (gmt 0)

10+ Year Member



i am running the php file from the WWW Folder lol
D'ohhh ...........

i can Run PHP Files.......

i was going to attach the PHP Info page but i see i cant attach files here :|

are you able to run the Script you wrote ?

Edit:

hmmm i put the file into another Folder and the script works fine O_O

i just cant Run the Script from a specified Folder where i have HTML Files (the folder is inside the WWW Folder )

this is a list of the files inside the folder

[TXT]AboutUs.html 29-Oct-2010 18:34 1.1K
[TXT]Contacts.html 09-Oct-2010 15:19 1.5K
[ ]HTBHA.rar 23-Oct-2010 21:43 735K
[DIR]Images/ 28-Oct-2010 20:31 -
[TXT]Projects.html 23-Oct-2010 21:41 1.1K
[TXT]UnderConstruction.html 23-Oct-2010 21:43 782
[ ]Year.php 08-Feb-2010 08:10 20
[ ]include.php 04-Nov-2010 12:35 417
[TXT]indexX.html 26-Oct-2010 07:03 2.8K
[TXT]style.css 30-Oct-2010 11:15 1.6K
[ ]test.php 30-Oct-2010 10:30 624

Matthew1980

12:31 pm on Nov 4, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



>>are you able to run the Script you wrote ?

A slightly tweeked version is what I base most of my scripts on, so yes in essence, it works fine.

What is the directory structure you have for this setup then?

(This should be the typical layout within your htdocs/www folder on your webserver)

WWW
|
-->
.../website/
.../website/index.php
.../website/inc/
.../website/images/
.../website/css/
.../website/css/style.css

The only thing I can see from what you have posted is that the indexX.html file IS HTML and not php, if your form is in that this will be the cause of the error, change those to .php and even if it only has html in there, it will run correctly.

>>hmmm i put the file into another Folder and the script works fine O_O

i just cant Run the Script from a specified Folder where i have HTML Files (the folder is inside the WWW Folder )

are the paths correct inside the files your working on?

Otherwise, I am confused - :/

cheers,
MRb

TheKiller

5:51 pm on Nov 4, 2010 (gmt 0)

10+ Year Member



Hi Matt

i think i know what was wrong....

the index wasnt using your script ...

the script was in the include.php file

the problem was because i was having a .htaccess file with this inside :" AddHandler server-parsed .php .html "

i used that to include a .php file that outputs the server date(year) on my index.html file



Thank you for your Script !

i Will use that :)