Media Manager for CodeIgniter v 2.3.0

By Prashant Pareek
Media Manager for CodeIgniter is ready to use file manager script for your CodeIgniter projects.

Thank you for purchasing media manager script. This documentation will help you get familiar with this script. Please provide this script a good rating. If you have any questions that are beyond the scope of this help file, or you have any issues using this script, please feel free to email via my user page contact form here. Thanks so much!

Created:25th November, 2014
By:Prashant Pareek
Email:prashantpareek1988@.gmail.com

Introduction


License

Envato provides two types of license: regular and extended. Both Regular and extended license can only be used in single end product. If you are a freelancer and want to use this item in you project, then you have to purchase regular license for each client.

If you creating your own product that you are going to sell, then you need to purchase extended licence. The same rule applies here that you can only use this item in single end product. For multiple end product that you are going to sell use you need to purchase extended license for each product.

You can customize this script according to your needs. You must need to attach the license agreement with each end product.

you can follow these links for more information:
http://codecanyon.net/licenses/standard
http://codecanyon.net/licenses/faq


Support

As an author I can provide you support via email or comments over item page that will include technical assistance using this script, removing bugs or errors.

Support doesn't include customization or integration of this script into other system like framework or CMS.


Quick Guide

Media Manager is a simple PHP script developed in CodeIgniter script to manager your media files like images, text, pdf, doc, audio, video etc files. You can create folders and upload media in them. You can easily traverse through each folder. You can delete single or multiple files or folders in script.

To install this script on local server or online, you just need to unzip package files in directory and run the installer calling its targeted url. Installer will ask about database and other settings. After successful installation script redirects to login page. You login into script providing your admin login details that you have chosen while installation.

A user can register himself on registration page. A logged in user can manage his own uploaded files, can change his password and update profile information.

Admin can log on to admin panel of script by calling the url: script-url/admin and providing admin login details. Here user see user details registerd on script and manage media script settings.


Features

Here is a list of features provided with this script.


Getting Started

Installation

To install the script on your domain or local server, unzip file content to the respective directory and hit the url on browser. A setup page will appear like shown below.

installation page

On clicking 'Setup Database' button a page will appear that will ask for database details like host-name, user-name, password and database name.

setup database

After successful submission of database details installer will ask for other settings like admin username, password etc. Here you can also provide app ID to activate reCAPTCHA plugin.

admin settings

User Login/Registration

The default page of media manager is login form. A registered user can login here by providing his username and password details. Here a user can choose to remain logged-in by clicking checkbox 'Remember me'. If user forgets his username and password he can follow the links below login form 'Forgot Username' and 'Forgot Password' to get his username on his email address and reset password.

On clicking the link 'Sign Up Here' provided on login form, a user registration form appears where a guest can create his account by providing different details. Below password fields a password strength widget is provided to show strength of password chosen by guest. If enabled, reCAPTCHA api is provided below registration form to prevent spams. On clicking 'sign in' link showing in panel above registration form it gets back to login form.

login form
registration form

On successful submission of registration form an activation link is sent to user email address. Clicking on that link or calling it in url user account is activated. User account needs to be activated for user to login into account.


Media Manager Page

After login user redirects to media manager page where user can upload media, create folders, delete media or folders, update profile and change password.


Update Profile

To update profile details a user needs to click user icon showing at top-right corner of the page, where a drop-down appear. Clicking on 'Update Profile' link it shows popup form. Here user can update his different details by filling and submitting the form.

dropdown
update profile

Change Password

On clicking 'Change Password' link in dropdown described above, a popup form appears where a user can change his password providing his old and new chosen password.

change password

Create Folder

A set of buttons are provided below site title, using these controls user can perform different operations. On clicking 'Create New Folder' button it displays a form below. Selected media directory path is shown right before input box. Filling and submitting the input box script creates a new folder in selected directory. Media path can be chosen by clicking the links showing folder directory tree view in left side of page.

create new folder

Upload Media

Clicking on 'Upload' button a bar appears below it. If drag and drop feature is supported by browser, user can drop files here, if not a form will appear, using this user can select media files to upload. There are different media settings like allowed media types maximum no. of files allowed to upload once, images dimensions etc that can be managed by administrator in control panel of script. Media files will be uploaded to selected directory. For eg. in image showing below files will be uploaded to 'media/nature' directory on hitting 'Submit button'.

upload media

Delete Media

Media script provides facility to delete single or multiple files or folders, although there are different methods to select media files in thumb and details view of media files. In thumbs view user needs to click on 'Select Items' button showing on top of media files, this will enable selection of media files by clicking on them. On clicking back on 'Select Items' button this will disable media files selection. After selection of media files, user can click on 'Delete' button showing in control bar, a alert box will appear, on clicking 'Ok' button it will delete selected media files from system.

delete media

In detail view of media files user can select checkboxes and delete media files in same way or can delete files one by one clicking on red garbage button showing in right most column of table.


Rename Media

To rename a file or folder user needs to select file/folder and click on 'Rename' button on top-bar. On clicking button a popup will appear. User can rename file/folder by entering the name and clicking OK.

In detail media view user needs to click rename media icon that appears next to media name in table to rename file or folder.


Media Views

Media Manager provides thumb and details view of media files. User can switch to both views clicking 'thumb' and 'list' icon showing in bar above media box. View information is saved in browser using cookie, so script loads same view on reload.

In both views folder icon is used to show folder. A arrow button is also shown in both views, clicking on this it load media path of directory one level up.


Admin Panel

Administrator can access admin panel of script by calling the url: base-url-of-script/admin. Here a login form will ask for administrator login details. On successful login it shows dashboard of admin panel.


Dashboard

A simple dashboard is provided where administrator can access users list, countries list and media settings page. This page shows no. of user registerd to site, no. of countries added and no. of media files uploaded so far.

dashboard

Users List

Cliking on sidebar navigation menu item or from dashboard, administrator can access user list. This page shows list of users registered on site. A green check icon is shown for users list whose account is activated below 'activated' column of table in right-most corner. Here administrator can check and edit users details by clicking on user's name. This action will displays a form to edit user details. Administrator can also add new user clicking on 'Add User' button.

Using search filter administrator can get list of specific user and using limit drop-down filter it shows chosen no. of items in list. Pagination links get starts showing for long list of items below table.

users list

Countries List

On clicking 'Countries' menu item in sidebar navigation it shows countries list. Countries list is used in user registration form. Same filter, pagination, add and edit facility is provided here as in users list.

users list

Media Manager Settings

On Media Manager Settings page administrator can set different settings of media that can be uploaded using script. Description of each setting is provided below.


Technical Guide

Dependencies List of dependencies

Styles customization and highlights

Here I am describing css files that I used in script and css structure.


Stylesheets

Here's a list of the stylesheet files I'm using with this script.

File NameDescription
bootstrap.min.cssBootstrap framework stylesheet for developing responsive websites.
dropzone.min.cssDropzone plugin stylesheet for drag and drop file upload feature.
font-awesome.min.cssFont-awesome plugin stylesheet for font icons used in script.
magnific-popup.cssMagnific Popup stylesheet to see image popups used in media section.
media.cssIt contains all of the specific stylings for the front-end part of script.

CSS Structure

Media.css contains specific stylings for front-end part of script. The file is separated into sections using:

/* === Toolbar Section === */
#controls {
  background-color: #eee;
  padding: 4px 0;
  border-bottom: 1px solid #ddd;
  line-height: 38px
}
.btn-toolbar .btn-wrapper {
  display: inline-block
}
...

/* === Folder Treeview Section === */
#treeview {
  background:#11998F;
  padding:5px 10px 5px 0;
}
#media-home {
  list-style:none;
  padding-left:10px
}
.folder-list {
  padding:0 0 0 10px;
  margin:0;
  list-style:none
} 
...

/* === Mediaview Section === */
#mediaview {
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden
}

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.

Off-canvas layout is used to show folder tree structure for smaller screens. Here you can find its styling:

.wrap { position:relative; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -ms-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out } .wrap.active { left:215px } @media screen and (max-width:48.063em) { #treeview{width:215px;} .js .oc{width:auto;position:absolute;top:0;left:-215px} } @media screen and (min-width:48.25em) { .wrap.active{left:0} }

Js Scripts customization and highlights

Here I am describing js files that I used in script and js code structure.


Js Files

Script imports following js files.

File NameDescription
jquery-1.11.2.min.jsjQuery is a Javascript library that greatly reduces the amount of code that you must write.
bootstrap.min.jsBootstrap is a popular html, css and js framework for developing responsive websites.
bootbox.min.jsBootbox is a jquery plugin which uses bootstrap to show alert messages in bootstrap modals.
dropzone.min.jsdropzone supports drag and drop feature for file upload.
masonry.pkgd.min.jsMasonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space.
jquery.magnific-popup.min.jsMagnific Popup is a responsive lightbox & dialog script to show image popups.
cookie.jsjquery cookie plugin is to save current view (thumb or details) on user's browser.
pwstrength.jsjquery plugin to show password strength for password chosen by user. Used in user registration form.
client.jsIt collects client side browser information like operating system, browser etc to support cross browser compatibility for file upload.
media.jsMost of the workarounds of media manager uses media js script.

Js Code Structure

Most of the media manager js script code is written in media.js. Here is the description of code structure.

Initialize dropzone code to support drag and drop.
Dropzone.options.uploadForm = {
  paramName: 'filedata',
  uploadMultiple: true,
  ...
}                   
Js to support off-canvas view for smaller screens.
$('body').addClass('js');
var menulink = $('#showTreeView'),
  wrap = $('#wrap');
menulink.click(function() {
  menulink.toggleClass('active');
  wrap.toggleClass('active');
  return false;
});  

Remove multiple attribute from file upload form for safari browsers (multiple file upload not supported)
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
if (isSafari) {
  $('#upload-file').removeAttr('multiple')
}

Initiating masonry layout for media in thumnail view
var cw = 200;
var wd = $(window).width();
if((wd > 0) && (wd <= 767)) {
  cw = 120;
}

msnry = new Masonry('#masonry-container', {
  columnWidth: cw,
  itemSelector: '.item',
  gutter: 10
});  

Set default view if cookie exists
var view  = ($.cookie('view')) ? '#details' : '#thumbs';     
$(view).addClass('active');
$(view + 'View').removeClass('hidden');
if(view == '#thumbs'){
  $('#toolbar-select').removeClass('hidden');
  msnry.layout();
}  
            

MVC Structure

Media manager script is developed using codeigniter using MVC structure. Controller, model and view files are stored in controllers, models and views folder inside ./application/ folder. Controller classes receives request from url and do operation accordingly. Model classes basically do database operations and view files stores layouts and PHP code to generate html structure. To simplify the html structure common layouts are stored in different php files.

The controller, model and view files that controls admin panel are stored separtely in 'admin' folders. Few extra libraries are used for different operation that are located in ./application/libraries/ folder. All mvc files and user defined libraries are listed below.


Controllers

Controllers classes receives request from url, calls its methods and pass arguments to methods.

File NameDescription
User.phpUser class does most of user related operations like user login, registration, account activation etc.
Media.phpThis class performs media related operations like upload media, create folder, delete media etc.
Pages.phpIt is used to show demo pages that are linked below registration page like 'terms of use'.
admin/Dashboard.phpIt handles login functionality of admin panel and shows dashboard.
admin/Countries.phpThis class shows countries list and performs other operation related to countries list.
admin/Users.phpThis class shows users list and performs other operations.
admin/Media.phpThis class is used to show media settings and stores them.

Models

Model class methods are called by controller classes and it generally does database related functions.

File NameDescription
User_model.phpUser_model model class does user related operations and called at various stages by user.php controller class.
Media_model.phpThis class handles media related tasks like retrieving directory list and media files list.
Autologin_model.phpThis class is used by Autologin library and does operations like retrieve, update, insert, delete of cookie in database that is used to save user login information.
admin/Countries_list.phpThis class does database related operation of countries list.
admin/Users_model.phpThis class does database related operation of users list.

Libraries

Libraries stores common codes and functionality that is used in most of places in script. Here is the list of extra libraries added to the script.

File NameDescription
Base.phpThis class contains common codes of script like setting notification is session, sending emails etc.
Recaptcha.phpreCAPTCHA library of google to prevent spams on user registration page.
Auth.phpAuthentication library to save, retrieve user login information in database and cookie.

Views

View files contains html layouts and includes other view files. Pages are created by including different view files. The admin panel view files are stored in admin folder. Both front-end and admin panel views are called through index.php. To better understand the structure of views, here are all the pages of script.


Front-end
Login Page
index.php
└── login.php
    └── notification.php
            
Recover Username
index.php
└── recover_username.php
    └── notification.php
            
Recover Password
index.php
└── recover_password.php
    └── notification.php
            
Reset Password
index.php
└── reset_password.php
    └── notification.php
            
Media Manager Page
index.php
└── manager.php
    ├── navigation.php
    ├── medialist.php
    │   ├── thumbs-view.php
    │   └── details-view.php
    ├── profile.php
    └── change-password.php
            

Admin Panel
Admin Login Page
admin/index.php
└── admin/login.php
    └── notification.php
            
Admin Recover Username
admin/index.php
└── admin/recover_username.php
    └── notification.php
            
Admin Recover Password
admin/index.php
└── admin/recover_password.php
    └── notification.php
            
Admin Reset Password
admin/index.php
└── admin/reset_password.php
    └── notification.php
            
Admin Dashboard
admin/index.php
└── admin/dashboard.php
    ├── admin/navigation.php
    └── notification.php    
            
Admin Countries List
admin/index.php
└── admin/countries.php
    ├── admin/navigation.php
    └── notification.php
            
Admin Edit Country
admin/index.php
└── admin/edit_country.php
    ├── admin/navigation.php
    └── notification.php
            
Admin Users List
admin/index.php
└── admin/users.php
    ├── admin/navigation.php
    └── notification.php
            
Admin Edit User
admin/index.php
└── admin/edit_user.php
    ├── admin/navigation.php
    └── notification.php    
            
Admin Media Settings
admin/index.php
└── admin/media.php
    ├── admin/navigation.php
    └── notification.php
            

Code Explanation

Here I am describing all the functionlity of media script by explaning the code structure of js and PHP.


Upload Media

Whenever user clicks on 'Upload' button in control bar of media manager page, it displays a box where user can drag and drop media files to upload. On selection of media files, it gets loaded into this section and a 'Submit' button appears. Clicking on this submit button media files get uploaded on server. Media script uses dropzone js plugin. This plugin is used to provide drag & drop feature. Dropzone js code is initialized in media.js file. On submit this method calls do_upload() method of controller class media.php.

Then do_upload() method calls upload_media() method of media_model model class located in ./application/models folder. The algorithm that is used by this method is described below.

  1. Get media manager configuration to upload files.
  2. Call method crossBrowserHacks() to change configuration according to browser information like operating system, browser type and version to provide upload media compatibility accross different browsers and client systems like laptop or mobile.
  3. Load CodeIgniter file upload library.
  4. Iterate through multiple files that are going to upload.
  5. Upload files one by one and store error in array if it occured while uploading files.
  6. Get uploaded file details.
  7. Store file details in database by calling the method save_file_details().
  8. Call create_thumb() method to create thumbnails for larger dimension image files.
  9. Get POST variable 'count' value. This variable is set when file is previously uploaded with same upload request.
  10. If count variable is set, get previously uploaded file count from session and append current count to it.
  11. Set success or error messages in notification session.

Create New Folder

On clicking the button 'Create New Folder' it shows a form. Chosing the folder name and submitting the form a new folder is created in current selected directory. This action calls 'create_folder' method of media.php controller. The algorithm is as follows.

  1. Get folder name from POST chosen by user.
  2. Get current path of directory from session.
  3. Sanitize folder name.
  4. If folder name exists, try to create folder.
  5. If folder name is not 'thumb' (as it used by system to save thumbnail images), try to create folder.
  6. Check if folder already exists, set error message.
  7. If folder with user chosen name not exists, create new folder.
  8. If folder not created, set error message.
  9. Store error message in session if it exists to show on media manager page.
  10. Redirect to media manager page.

Delete Media

As described before, when user selects media files or folders and clicks on 'delete' button a confirmation message appears, on confirmation selected files and folders are deleted. This action calls 'remove_media' method of media.php controller class. The algorithm is described below.

  1. Get current user ID of logged in user.
  2. Get array of selected media files and folders from POST method.
  3. Iterate through each array element.
  4. Sanitize media file and folder names.
  5. Get total path of file or folder.
  6. Check if path is for file or folder.
  7. If path is for file.
    1. Remove media file entry from database.
    2. Delete file.
    3. Delete image file from 'thumb' folder, if exists.
  8. If path is for folder.
    1. Delete all file names from database that belongs to that folder.
    2. Delete all files along with folder.

Rename Media

As explained before to rename media file or folder a popup box appears containing name of name of file or folder, on edit and clicking button following process occurs.

  1. file/folder path along with edited name details as sent to 'rename_media' method of media.php controller class.
  2. Method checks if received path is for file or folder.
  3. Method again checks if file/folder name already exists, if yes it returns with error message.
  4. Appropriate mysql query is run to rename single media name or path of numbers of files in case of folder.
  5. On successfully run of query file or folder is renamed in file system.
  6. True is sent in case of success or error message is sent in case of any error.
  7. On successfull rename of file or folder the page is reloaded.

User Registration

New user register on script using user registration form. On registration an activation link is sent to user's email address. On clicking on that link user account get activated. The algorithm is as follows.

  1. register method of user.php controller class is called.
  2. Get user details via POST.
  3. Validate different details for different rules set.
  4. If data validated, call register method of user_model.php model class.
  5. Encrypt password using following method.
    1. Get salt by taking random string of 32 characters.
    2. Attach string to password and create md5 hash of it.
    3. Create encrypted password by getting string 'hash':'salt'.
  6. Store user details, encrypted password along with activation token (32 characters random string).
  7. Save details in database and send activation link to user's email address.
  8. Redirect to login page with appropriate notification message.

User Login

User can login to script providing his username and password. User can also set if he wants to remain login.

  1. validate_credentials method of user.php receives user details.
  2. validate details for rules set.
  3. Call validate method of user_model.php model class.
  4. Match password using following steps.
    1. Get salt that is attached with database password.
    2. Create user password hash with stored salt.
    3. Match user password hash and database password hash.
  5. Set user details in session if user credentials match.

DB Schema

Media manager script uses 5 database tables whose DB Schema is provided below.

  1. users
  2. autologin
  3. countries
  4. media
  5. recovery_tokens

Users

This table stores user details.

Fields
FieldTypeCollationNullKeyDefaultExtraPrivilegesComment
idint(11)(NULL)NOPRI(NULL)auto_incrementselect,insert,update,references 
namevarchar(255)latin1_swedish_ciNO (NULL) select,insert,update,references 
usernamevarchar(32)latin1_swedish_ciNO (NULL) select,insert,update,references 
emailvarchar(100)latin1_swedish_ciNO (NULL) select,insert,update,references 
passwordvarchar(100)latin1_swedish_ciNO (NULL) select,insert,update,references 
birth_datedate(NULL)NO (NULL) select,insert,update,references 
gendervarchar(6)latin1_swedish_ciNO (NULL) select,insert,update,references 
mobile_novarchar(15)latin1_swedish_ciNO (NULL) select,insert,update,references 
locationsmallint(3)(NULL)NO (NULL) select,insert,update,references 
register_datedatetime(NULL)NO (NULL) select,insert,update,references 
last_visit_datedatetime(NULL)NO (NULL) select,insert,update,references 
usertypetinyint(2)(NULL)NO (NULL) select,insert,update,references 
activationvarchar(32)latin1_swedish_ciNO (NULL) select,insert,update,references 
Indexes
TableNon uniqueKey nameSeq in indexColumn nameCollationCardinalitySub partPackedNullIndex typeCommentIndex comment
users0PRIMARY1idA9(NULL)(NULL) BTREE  

Autologin

This table is used to store cookie information related to user login.

Fields
FieldTypeCollationNullKeyDefaultExtraPrivilegesComment
userint(11)(NULL)NOPRI(NULL) select,insert,update,references 
seriesvarchar(255)latin1_swedish_ciNOPRI(NULL) select,insert,update,references 
keyvarchar(255)latin1_swedish_ciNO (NULL) select,insert,update,references 
createdint(11)(NULL)NO (NULL) select,insert,update,references 
Indexes
TableNon uniqueKey nameSeq in indexColumn nameCollationCardinalitySub partPackedNullIndex typeCommentIndex comment
autologin0PRIMARY1userA0(NULL)(NULL) BTREE  
autologin0PRIMARY2seriesA0(NULL)(NULL) BTREE  

Countries

This table stores countries names.

Fields
FieldTypeCollationNullKeyDefaultExtraPrivilegesComment
idsmallint(3) unsigned(NULL)NOPRI(NULL)auto_incrementselect,insert,update,references 
namevarchar(128)utf8_general_ciYES (NULL) select,insert,update,references 
Indexes
TableNon uniqueKey nameSeq in indexColumn nameCollationCardinalitySub partPackedNullIndex typeCommentIndex comment
countries0PRIMARY1idA256(NULL)(NULL) BTREE  

Media

All uploaded media files details are stored in this table.

Fields
FieldTypeCollationNullKeyDefaultExtraPrivilegesComment
user_idint(11) unsigned(NULL)NO (NULL) select,insert,update,references 
pathtextlatin1_swedish_ciNO (NULL) select,insert,update,references 
namevarchar(250)latin1_swedish_ciNO (NULL) select,insert,update,references 
typevarchar(64)latin1_swedish_ciNO (NULL) select,insert,update,references 

Recovery_tokens

Generated tokens for password recovery are stored in this table.

Fields
FieldTypeCollationNullKeyDefaultExtraPrivilegesComment
user_idint(11)(NULL)NO (NULL) select,insert,update,references 
tokenvarchar(32)latin1_swedish_ciNOPRI(NULL) select,insert,update,references 
Indexes
TableNon uniqueKey nameSeq in indexColumn nameCollationCardinalitySub partPackedNullIndex typeCommentIndex comment
recovery_tokens0PRIMARY1tokenA0(NULL)(NULL) BTREE  

Configuration

All the configuration of CodeIgniter based media manager script are stored in ./application/config/ folder in respective files. A CI developer can set different configuration by setting details in various files. for eg. database connection details are stored in database.php, routing details is stored in routes.php

This script uses two third party libraries reCAPTCHA and autologin, reCAPTCHA library is used to enable google captcha service on registration page while autologin is used to store user login information in cookie. There configuration are stored in recaptcha.php and auth.php respectively.

Site title and admin email (to send emails) are stored in site.php file.


Sources and Credits


I've used the following assets.


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

Prashant Pareek