BK Mobile Website & Full Mobile Admin Panel Documentation by WhiteCoder


BK Mobile Website with Full Mobile Admin Panel Script V2.4

Created: 6/1/2012
Updated: 6/10/2014
By: WhiteCoder
Email Me: ftm2quick@gmail.com

First off thanks for buying my script. If you have any questions that can't be answered in this documentation please feel free to email me.


Table of Contents

  1. Installation
  2. Quick Start Guide
  3. Summary of Use

A) Installation - top

The installation is very simple for this script. Please follow the directions below:

  1. Upload the files to a folder on your server.


  2. Log in to your Cpanel and create your database. (remember the name as it will be needed in the next step)


  3. Open up your web browser and point it to http://WHERE-YOU-UPLOADED-TO.com/install.php it will guide you through the rest of the setup and installation. A fresh install is required as of this version (2.4). When you browse to the install.php file you will be given a button to do a new install.


  4. ***AS OF THIS VERSION (2.4) THE UPGRADE FEATURE NO LONGER WORKS, A NEW INSTALL IS REQUIRED! IF YOU WANT HELP MIGRATING YOUR EXISTING VERSION TO THE NEWEST VERSION CONTACT ME VIA EMAIL ABOVE, AND I WILL PROVIDE ASSISTANCE.***


  5. Installation and configuration is now complete the automated installer will remove the install files automatically, but if for some reason it doesn't there are 3 files with the name install in them in the main folder of the site, just delete them manually. Also delete ditto.php if the automated installer doesn't remove it. But again this shouldn't be an issue.


  6. To access the admin panel for the first time go the url you installed it at /admin for example http://WHERE-YOU-UPLOADED-TO.com/admin once there click login. The username and password by default is username: admin and password: admin you will want to go ahead and change the password on the site settings page, and re-login.



B) Quick Start Guide - top

Learning to use a FTP program
To start with you will need a FTP program to upload the BK Mobile Website to your web hosting (server). The one I personally recommend is Filezilla*. Using the FTP program of your choice you'll then be able to upload everything that is required to install your very own Mobile website with a full admin backend.

*Filezilla is a decently easy to use FTP program. It will require you to know your web address (or IP address), username, and password to connect to your web hosting provider. Once you are connected the files on your host server will appear in the right side window, and the files on your harddrive will appear in the left side window. You can drag and drop entire folders from your harddrive (left side window) to your hosting account (right side window) or you can right click on the files in the left side window (your harddrive) and click on upload in the menu that pops up and it will upload that single file. Once you have entered your FTP information you can use the quick connect option to connect immediately upon opening Filezilla from here on out.

Helpful Links:
Filezilla
Filezilla Tutorial



Installing BK Mobile Website
For detailed installation instructions please see Installation in Section A



Playing with the script
Once you have the BK Mobile Website installed you should go ahead and spend some time getting used to the features that it has to offer. I will go over all of those features in more detail in the sections to follow. To login to the admin area head on over to http://your-domain-you-installed-it-to.com/admin and enter admin for the username and password.
**Once you have logged in it would be a good idea to go ahead to Site Settings and change your password.**



*** NEW ADMIN PANEL STYLING IN V2.4! ***

The entire frontend and backend of the system has been revamped to use MySQLi instead of the old MySQL. Also proper data sanitization has been implemented on all database inserts, and update queries to help keep hacking attempts to a minimal, and to avoid database injection attempts.



System File Versions for v2.4
jQuery Version: 1.10.2
jQuery Mobile: 1.4.2



Theme Roller ***(NEW IN V2.4)***
The theme roller is pretty self-explanatory, I have modified the code to only allow the use of 1 swatch, being A so anything that uses data-theme="b", data-theme="c", etc and so on won't work. It must be set to data-theme="a" if you intend to use my version of the theme roller. The changes that are made are saved in real-time to the main website. Once you click the save button within the Theme Roller the changes are live on your website right then. When you load the Theme Roller up you don't have to import any CSS or anything it's already ready to go, just make your changes and save and have fun designing your mobile website.



Site Settings
Alrighty here we go, I am going to go over each feature dealing with the Site Settings. I am going to do them as a list with the definition of what it does out beside it.



Category Management
Here comes the Category Management section, please read over this section carefully. Below I am going to explain each option the best I can with all of the features and capabilities it has.



Build Homepage
Here comes the Build Homepage section, please read over this section carefully. Below I am going to explain each option the best I can with all of the features and capabilities it has.

(V2.4 Update) Fixed the grid system to be responsive under 35em width.
(V2.4 Update) Added new WYSIWYG editor that is mobile friendly

(V2.3 Hotfix Update) - Fixed a bug with the built in grid system options adding extra html breaks on submit.



Page Management
Here comes the Page Management section, please read over this section carefully. Below I am going to explain each page the best I can with all of the features and capabilities of that particular page.

(V2.4 Update) Fixed the grid system to be responsive under 35em width.
(V2.4 Update) Added new WYSIWYG editor that is mobile friendly

(V2.3 Hotfix Update) - Fixed a bug with the built in grid system options adding extra html breaks on submit.



Blog Management
The Blog Management section, please make sure to read this section carefully. Below I am going to explain how the blog management works the best I can with all of the features and capabilities of it.

(V2.4 Update) Fixed the grid system to be responsive under 35em width.
(V2.4 Update) Added new WYSIWYG editor that is mobile friendly

(V2.3 Hotfix Update) - Fixed a bug with the built in grid system options adding extra html breaks on submit.



RSS Scraper
And finally the RSS Scraper section, please make sure to read this section extremely carefully.



Photo Management
The Photo Management section, please make sure to read this section carefully. Below I am going to explain how the photo management works the best I can with all of the features and capabilities of it.

(V2.4 Update) Completely revamped the system for viewing photo galleries.

(V2.3 Hotfix Update) - Fixed alignment issue with the first row of images within an album.



Social Management
The Social Management section, please make sure to read this section carefully. Below I am going to explain how the social management works the best I can with all of the features and capabilities of it.




C) Summary of how to use - top

BK Mobile Website & Full Mobile Admin Panel was designed to be easy to use and customized to fit to your needs no matter what they may be. All of the code used is well commented and well explained. The script itself is pretty much self explanatory once installed. To edit the pages you will want to browse to the url you have it installed at, and add the /admin to the end for example http://test.com/admin then once you do that click on the login button. Then you will be prompted for a username and password which is by default admin for both fields. After you have logged in you will want to browse to the Site Settings area and change your password.

While you are on the Site Settings page you can go ahead and fill in your settings and pick your theme layout, you can mix and match backgrounds, headers, buttons, and footers they don't have to match. Also go ahead and upload your logo at the bottom of the Site Settings page, the logo must be in .png format with a size of 150px wide and 45px high. Once you have configured all of your settings here we are ready to move on to the next section.

Now that you have your Site Settings area configured and layed out how you want, let's move on to the Page Management area. Once you click on the Page Management button you will be presented with a page that has About Us, Contact, and Services on it. All you have to do is click on one of those page names and you will be taken to the editing area where you can change the page titles, and context. The titles and context areas will accept javascript, and html coding tags. Once you have configured all of your pages you are ready to continue.

Now that we are moving right along and have the Site Settings, and Pages configured we will move to the Blog Management area. Click on the Blog Management button and this will take you to a page where you have similar options to what you had on the Page Management area. The only difference is we have a Add New Blog Entry button this does exactly what it says it does. When you click on this you can add a new blog entry that is posted to the homepage of the website. If you need to edit or delete a blog entry just click on the name of the entry and you will receive a dialog window asking if you want to edit or delete this particular blog entry. Just a quick note the Blog Summary is just a short description area on the homepage that tells you what the particular blog entry is about once you click on that on the homepage you will be taken to the entire Blog Story. Also all of the fields in the Blog Management area will take javascript, and html coding just like the Page Management section does. Now that you have got the hang of all of this, and you have configured all of your options, pages, and blog entries you are ready to go live. Enjoy this as much as I did coding it.

Table of Contents



Copyright 2014