“Files 4 Client” Documentation by “Kevin Schiffer” v1.0.4


“Files 4 Client”

Created: 12/08/2013
Updated: 02/11/2014
By: Kevin Schiffer
Email: mail@kevinschiffer.de

Thank you for purchasing this item. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. Quick Start
  2. Usage
  3. Password protection
  4. Updating from older versions
  5. HTML Structure
  6. PHP Code Explanation
  7. CSS Files and Structure
  8. JavaScript
  9. Placing a logo inside the title section
  10. Error Document settings inside .htaccess
  11. Version History
  12. Sources and Credits

A) Quick Start - top

Step by step

Thank you very much for purchasing this item. If you want to dive right in, you just have to follow these quick steps:

  1. Upload the contents of the script folder to the location on your webspace where you want to share your files later on
  2. In your browser, navigate to the respective directory where you just uploaded the files
  3. You should now see a setup page. Fill the form and hit "Install!".
  4. You are done and can begin uploading your files

Usage
If you want to provide files via the file server, all you need to do is opening an FTP-client, login to your webspace and navigate to the location of the FILES4CLIENT script. Inside the script directory, create a new folder (e.g. "131004_ClientXY_Files") and simply upload your files to that folder. When the upload is done, your files will be available at:

http://www.example.com/files4client-directory/131004_ClientXY_Files
You can now share this link to your client and he will be able to download the files he needs.
If you have the automatic folder deletion activated (as configured during setup) and you want to create a client-url that will not be deleted, simply start your new folder with an "_" e.g.: "_link-that-will-not-expire". The folder is now ignored by the automatic deletion.


B) Usage - top

Prerequisites and Setup

In order to use this script without limitations, the following conditions have to be met:

If this is the case, then all you have to do is to upload the contents of the "script" folder (located inside of the downloaded zip) to the location where you want your client-urls to be. For example, if your designated client file server location is: http://www.example.com/clients/, you will need to navigate to the respective folder inside of your FTP-client and simply upload the script to this location. Please do not use special characters in your file or folder names, as these will not function correctly.
IMPORTANT: It is essential for the operational reliabilty of the script that you upload the .htaccess file. In some cases, this file may be hidden in windows due to its dot-prefix. Make sure that every file in the script folder is uploaded correctly.

Once you have done this, open up the root of your file server (e.g.: http://www.example.com/clients/). You will now see a setup interface that will help you setting up the script according to your preferences. There are six settings you will have to set:

Fill out the form and hit "Install!". If everything worked out, you will now see a success confirmation. The setup of your file server is now complete and your settings have been stored into the settings.php, where they can also be edited.

Technical functionality (brief)

This script sets a global index-script (index.php) as directory index for its subdirectories using .htaccess, hence it is possible to generate dynamic file list for the contents of a directory without the need of a index.php oder index.html for the directory.


C) Password protection - top

Adding password protection to your links

With Version 1.0.2, a simple password protection is introduced which functions as follows.

It is possible to set a password for individual links or for every link by default.

Master Password
If you want all links to be password protected by default, simply set the master password during setup or by editing the settings.php. Every link will now need to be unlocked using the master password you set.

Individual Password Protection
If you want to set a password for an individual link, all you need to do is to create a 'pw.txt' which contains your desired password inside the subfolder. E.g. If you have created a subfolder 'client_xyz' and want to password protect it, simply place the 'pw.txt' inside of it and the script will automatically protect the subfolder. If you have set a master password as well, please note that the pw.txt password has a higher priority.
CAUTION: Please note that this is by no means a high security password protection, so if you have very sensitive data, please do not solely rely on it!

Username & Password field
With Version 1.0.4, the password feature has been extended by the possibility to specify a username as well. If you want to use a username and password form, simply use the 'pw.txt' but edit it to have (exactly) two lines, where the first line is the username and the second line is the password.
The respective 'pw.txt' might look like this:

admin
swordfish
The script will automatically detect this and add a username input field to the form.


D) Updating from older versions - top

The easiest and safest way of updating is simply replacing all files of the script with the new ones. You don't need to touch your existing client subdirectories if you want them to be operational after the update. You can now either run the setup again or merge your old settings.php file with the new one by adding the new settings (ENABLE_THUMBNAILS & MASTER_PASSWORD) into your existing settings.php. If you have previously set a logo on your page title, you will need to set it up again in the main.css (as described here).

NOTICE: In any case, it is highly recommended to backup your insallation locally before you attempt to update in order to prevent data-loss.


E) HTML Structure - top

The HTML structure of the file server is very simple and organized as follows (simplification):
Dynamically generated markup is illustrated in square brackets.

<!-- BEGIN HEADER -->
<div id="title">
    <h1 id="title-headline">[SERVICE NAME]</h1>
</div><!-- end div#title --->
<!-- END HEADER -->

<!-- BEGIN FILE LIST -->
<div id="list-wrapper">
    <div id="list-title">
        <table><tr><td class="folder-icon"></td><td class="foldername"><h2>[FOLDER NAME]</h2>Created <strong>[TIME SINCE CREATION]</strong> ago</td><td id="title-last-td">[EXPIRATION STRING]</td></tr></table>
    </div><!-- end div#list-title -->
    <table id="file-list">
        [GENERATED TABLE CODE]
    </table>

    <div id="list-zip">
        <div id="progressbar"></div>
        <p id="zip-percentage">0%</p>
        <table><tr class="clickable"><td class="zip-icon filetype-icon"><div></div></td><td class="filename"><a id="makezip" href="javascript:void(0)" title="Download all files in a zip archive">Download this whole folder as zip</a></td><td class="align-right">
        <script>
        document.write("Note: this may take a few moments!")
        </script>
        <noscript>Note: JavaScript must be enabled!</noscript></td></tr></table>
    </div><!-- end div#list-zip -->
</div><!-- end div#list-wrapper -->
<!-- END FILE LIST -->

		

As illustrated, the markup is divided into two sections, namely the header and file list section. Within the file list section the dynamically generated table columns have the following structure:

<tr class="clickable" onclick="window.location.href='[FILE LINK]';">
    <td class="select-indicator"></td>
    <td class="icon-cell [FILE EXTENSION]-icon">
        <div>
            <div></div>
            <div class="bottom-div"></div>
        </div>
    </td>
    <td class="filename">
        <a href="[FILE LINK]" title="[FILE NAME]" class="file-link">[FILE NAME]</a>
        <span class="chooser">
            <a href="[DOWNLOAD LINK]">Download</a> | <a href="[FILE LINK]">View</a>
        </span>
    </td>
    <td>[FILE CREATION]</td>
    <td class="align-right">[FILE SIZE]</td>
</tr>

F) PHP Code Explanation - top

FILES4CLIENT is a procedural script, that means there are no classes used or defined with it. All functionalities are based on functions, that serve specific outputs or calculations nessessary to output the file list. The main functions for the output of the file list can be found in the functions.php. The specific functionalities of all script files can be found below.

This script consists of nine php files, which are:

  1. files4client.php
  2. functions.php
  3. settings.php
  4. setup.php
  5. ajax.php
  6. download.php
  7. delete_old_folder.php
  8. root.php
  9. 404.php

Here is a small description of the functionality of these scripts:

  1. The files4client.php script is set as document root by the .htaccess and therefore generating the markup for the file list.
  2. The functions.php contains all major functions the script needs. It also contains the "generateTableRows()"-function that generates the markup for the file list columns.
  3. The settings.php script contains constants that the user set during install. If you want to alter the settings you made during installation, you can alter this file.
  4. setup.php is run the first time you use the script. It will help you setting up the script according to your preferences. After you have run the setup successfully, your inputs will be stored into settings.php and the script will be deactivated. (Set the "SETUP_FINISHED"-constant in settings.php to "FALSE" if you want to run the setup again.)
  5. The ajax.php script is needed for the zip functionality. It will execute the zip-request and is run from the index.php.
  6. The download.php enables the download of files that otherwise would be executed inside the browser (like .jpg or .mp3).
  7. delete_old_folder.php is executed everytime the index.php is run. This script deletes all public folders inside of the script's root directory. It will not delete the scripts own subdirectories "img", "js" and "css" and folders with names that start with an underscore. It is not executed when specified during the setup process.
  8. root.php is an error document that is run when the script root is requested. It will inform the user that this is not allowed.
  9. 404.php is an error document that is run when the url specified inside the file-server environment is not existent.

For more detailed explanations, please refer to the inline documentation inside of these scripts.


G) CSS Files and Structure - top

This script is using three CSS files. The first one (normalize.css) is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

The second file (spectrum.css) is the stylesheet for the spectrum color picker plugin.

The third file (main.css) contains all of the specific stylings for the page. The file is separated into sections using:

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
  
  -- styles for background functionaly and better compatibility
	
	/* ==========================================================================
   Site styles
   ========================================================================== */		
	
	/* ================= General ===================== */

	general styles

	/* ================= Title Section =============== */
	
	styles for the title section
	
	/* ================= List Title Section ========== */
	
	styles for the title column of the file list
	
	/* ================= File List Section =========== */
	
	styles for the file list itself
	
	/* ================= Zip Section ================= */
	
	styles for the zip section at the bottom of the file list
	
	/* ================= Icons ======================= */
	
	defines the filetype icons

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

NOTE: Some styles are being automatically colored via javascript when the site is run, these styles are marked with the "colorized dynamically" comment at the end of the line. This functionality is necessary in order to enable the custom base color that colorizes respective sections of the site. If you still want to alter these styles, comment out the "colorizeIt()" function inside the main.js (line 28) and go ahead.

Some styles are just for Internet Explorer 8 and lower and are used to maintain cross-browser compatibility of the script. These styles begin with

html#lt-ie8
.


H) JavaScript - top

This script imports six Javascript files.

  1. jQuery
  2. modernizr
  3. spectrum.js
  4. tinycolor.js
  5. main.js
  6. plugins.js
  1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  2. Modernizr is a Javascript that mimics html5/css3 functionalities on browsers that do not support these yet.
  3. Spectrum is a lightweight color picker plugin for jquery and used in the setup script.
  4. Tinycolor is a color library for javascript and needed for the base-color functionality that dynamically colors specific elements of the script.
  5. main.js is the main javascript file, all animations and script specific functionalies are implemented there.
    This includes:
    • Dynamic colorization of site elements using the base-color.
    • Ajax requests and animations for the zip folder functionality.
    • User interface animations.
  6. plugins.js is where jquery plugins should be pasted. Currently there is only the "jQuery Easing" plugin.

Setting a logo to display inside the title section is very easy. Simply open up main.css in the "css" subfolder and scroll to the

/* ================= Title Section =============== */

There, find the following line:
div#title {width:800px; margin:20px auto 18px auto; position:relative; height:80px; /* background: url(../img/title.png) right center no-repeat; */}

Uncomment the last section of the style and either change the url to your background image, or leave it as it is and replace the "title.png" image inside the "img" subfolder with your logo.

The logo will now be visible.
NOTE: Depending on the dimensions of your logo-image, it might be necessary to change the height value respectively. You find the height value in the same line, it is set to 80px by default.


J) Error Document settings and .htaccess configuration - top

The script has two custom error documents, which are specified in the .htaccess file. The .htacces file is a local server configuration file that contains directives for the apache server. For this script there are three important directives set.
The first one is

DirectoryIndex ../files4client.php root.php

which will set the default directory index document to the files4client.php. This is necessary in order to enable the dynamically generated directory index inside the client folders. If the files4client.php cannot be found, the root.php will be load instead, prompting an appropriate error message for the user.
The second and third directives are
ErrorDocument 404 /404.php
and
ErrorDocument 400 /root.php
which set the error handling of these two errors (404 and 400) to these respective files. Unfortunately it is not possible set these directives relative to the script root, but only to the document root of the server.

NOTE: During the setup process, the script will attempt to automatically set your .htaccess file with the correct absolute paths. If you experience problems after the setup, please make sure that the file has the correct paths. This means that when you installed the script into a subdirectory (e.g. http://www.example.com/file-server/) it should be:
ErrorDocument 404 /file-server/404.php
and
ErrorDocument 400 /file-server/root.php
.

K) Version History - top


L) Sources and Credits - top

I've used the following scripts


Once again, thank you so much for purchasing this script. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Kevin Schiffer

Go To Table of Contents