BK Mobile Website & Full Mobile Admin Panel Documentation by WhiteCoder
BK Mobile Website with Full Mobile Admin Panel Script V2.4
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
- Installation
- Quick Start Guide
- Summary of Use
A) Installation - top
The installation is very simple for this script. Please follow the directions below:
- Upload the files to a folder on your server.
- Log in to your Cpanel and create your database. (remember the name as it will be needed in the next step)
- 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.
- ***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.***
- 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.
- 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.
- (V2.4 Update) Ability to change website name and copyright information for the footer.
- (V2.4 Update) Ability to choose menu panel locations (left or right), and style (overlay, reveal, or push).
- (V2.4 Update) Ability to setup twitter widget to display embedded timeline.
- (V2.4 Update) Ability to setup facebook embedded activity to be displayed on the frontend.
- (V2.4 Update) Ability to choose whether you want a custom background or the theme roller's background.
- (V2.4 Update) Ability to upload your very own custom background image to be used.
- (V2.4 Update) Ability to modify the header's top border color, and top border thickness.
- (V2.4 Update) Ability to modify the header's bottom border color, and bottom border thickness.
- (V2.4 Update) Ability to modify the page header's (h3 tags) font color.
- (V2.4 Update) Ability to modify footer's top border color, and thickness, as well as the footer's text font color.
- (V2.4 Update) Ability to set the header's height manually as well as the dimensions on the current logo.
- (V2.3 Hotfix Update)Which Navigation Style?: - Choose between collapsible navigation or button navigation for the bottom page links.
- (V2.3 Hotfix Update)Twitter Feed in Navigation?: - This turns the twitter feed button on and off in the navigation links at the bottom.
- (V2.3 Hotfix Update)Blog in Navigation?: - This turns the blog button on and off in the navigation links at the bottom.
- (V2.3 Hotfix Update)Photo Gallery in Navigation:? - This turns the photo gallery button on and off in the navigation links at the bottom.
- Your Password: - This where you change the password you login to your admin panel with. (disabled in demo)
- Homepage Title: - This is the overall name for your mobile site that is housed in the title tags in the header of each page.
- SEO Title: - This is the meta title, it helps search engines find you based on an individuals search parameter.
- SEO Keywords: - This is the meta keywords, these are very important and need to describe your page(s) very well so people searching can find your mobile site.
- SEO Description: - This is the meta description, it is also indexed by search engines and helps people searching find you.
- (V2.2 Update)Phone Number: - This is the number that will be used on the contact page that is tied into the "Call Us" button.
- Your Email: - This is the email that all submitted contact forms from your mobile site will be sent to.
- Your Email Subject: - This is the email subject that is applied to all the submitted contact forms from your mobile site.
- Google Analytics: - This is where you put your Google Analytics code all you need is the UA-XXXXXX-XX part the scripting in place handles the rest. This allows you to check your traffic statistics in depth.
- (V2.2 Update)Google Map Latitude: - This is the latitude coordinates used in the dynamic google map on the contact page.
- (V2.2 Update)Google Map Longitude: - This is the longitude coordinates used in the dynamic google map on the contact page.
- (V2.2 Update)Google Map Zoom Level: - This is the default zoom level used in the dynamic google map on the contact page.
- (V2.2 Update)Google Map API Key: - This is the api key that is required to use the dynamic google map on the contact page. I also have provided a link that you can click to take you to the page when you need to setup your api key.
- (V2.2 Update)Twitter Feed Page?: - This turns on or off the twitter feed page in the navigation links.
- (V2.2 Update)Twitter Name: (Twitter Page) - This is where you put your twitter username to dynamically populate your twitter feed page mentioned above.
- (V2.2 Update)Tweets Displayed: (Twitter Page) - This is where you set how many tweets are displayed on your default twitter page mentioned above.
- RSS Scraper or Blog Entry: - This is where you can choose which is displayed on your homepage. You can select the blog entry bubble and post your own content, or select the RSS Scraper and have it automatically filled in for you. (Be sure to visit the link to the left under RSS Scraper or Blog Entry as this is where you setup your RSS Feeds that you want scraped.)
- (V2.2 Update)Blog or Page Homepage?: - This is where you set if you want your main homepage (index page) to be blog style or page style.
- (V2.2 Update)Photo Gallery: - This is where you can turn the photo gallery on or off in the navigation links.
- Page Background: - This is the background of the pages, the images are tiled to fit no matter what the screen resolution is. To use this just click the radio button out beside the background you want to use. (Be sure to hit submit at the bottom of the page)
- Header Background: - This is the page header background, the images out beside the radio buttons display what the header will look like. (Be sure to hit submit at the bottom of the page)
- Page Transitions - These are all of the available page transitions for JQM, currently they are applied to the entire mobile site, and not on a page by page basis. This is being looked at as something for a future update.
- Button Background: - This is the button background, the images of the buttons out beside the radio buttons display what the button will look like when not hovered, or clicked. The buttons are fully styled for all 3 states, active, hover, and click. (Be sure to hit submit at the bottom of the page)
- Footer Background: - This is the footer background, the images out beside the radio buttons display what the footer will look like on the page. These footers also have hover, and click styles applied to them. (Be sure to hit submit at the bottom of the page)
- Upload Logo: - This is where you can select your own logo that will replace the existing Logo Here one in the top left of the mobile site. The image must be 145px wide and 50px tall and .png format. If these criteria's aren't met the image will not upload.
- Current Logo: - This displays the current logo of the mobile site.
- Submit Button - This is what submits all of the data chosen above and writes the database, and makes all of the changes you have made become live on your mobile site.
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.
- Add New Category: - This is the button you'll want if you want to add some new categories. Once you have clicked this you have the option to give your category a new name, and select which type of category it is. You have 3 options for category types as of right now, and they are blog, page, and rss.
- The categories that are listed on the main page of the category management section: - You can click on these and edit them, or delete the category all together.
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.
- The homepage that is listed on the main page of the build homepage section: - You can click on this and edit the homepage. You have the same options here as you do on the page management section. You can add a title, or select a newly added grid option to setup and design your new homepage.
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.
- (V2.3 Hotfix Update) - When you edit a page you can select if the page is shown in the navigation buttons by selecting on or off for the corresponding page.
- Add New Page - This is the button you want to click if you are going to add a new page to yoru site. The page slug is very vital as it creates and names the actual file on the server itself based on this name. Try to avoid using the following `@#$%^&*(),.'":; in the page slug. If you want to use the built-in contact form please enter contact as the page slug, and it will automatically do the behind the scenes magic and make it appear on your contact page, and as always html coding, javascript, and css can be used in the page title, and page content sections.
- (V2.2 Update)Page Category option added, as well as Page Order capability to the add page, and edit page sections. Also added the preset grid design system. It's as simple as clicking a button, and typing in your information into the grid layouts.
- About Us - This is the about us page, if you click on the button that is housing the words About Us you will be taken to the edit page area. From here you can edit the title of the page, and put in your page content. The page title, and page content areas accept html code, javascript code, and css styling.
- Contact - This is the contact page, if you click on the button that is housing the words Contact you will be taken to the edit page area. From here you can edit the title of the page, and put in your page content. The page title, and page content areas accept html code, javascript code, and css styling. The contact page already has a built-in contact form that is displayed under any content that you put in the page content area. The settings for this contact form are set in the Site Settings area as mentioned in the above section.
- Services - This is the services page, if you click on the button that is housing the words Services you will be taken to the edit page area. From here you can edit the title of the page, and put in your page content. The page title, and page content areas accept html code, javascript code, and css styling.
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.
- Add New Blog Entry - This is the button you want to click if you are going to add a new entry to your blog. Your blog entry is displayed on the homepage of your mobile site. Once on the add new blog entry page you have a dropdown selection box to pick how you want the date to be displayed. After you have chose how you want the date to be displayed click in the text field of the out beside Blog Date and you will get a calendar to pick your date from. After you have chosen your posting date, enter your blog title, then your blog summary. The blog summary is a short description that is displayed on the homepage of your mobile site. (When someone clicks it they will be taken to the full blog story.) Now finally add your blog story which is the meat of your post, and as always html coding, javascript, and css can be used in the blog title, summary, and story sections.
- (V2.2 Update)Blog Category option added, as well as Blog Order capability to the add blog, and edit blog sections. Also added the preset grid design system. It's as simple as clicking a button, and typing in your information into the grid layouts.
- Buttons with Blog Names - This is all of your blog entries to date, if you click on the name on the button you will be taken to another page where you can edit your blog post, or delete your blog post. The edit function holds true to the add blog entry, and the delete function removes the post from the admin backend, as well as off the homepage of your mobile site.
RSS Scraper
And finally the RSS Scraper section, please make sure to read this section extremely carefully.
- Add New RSS Feed - This is the button you want to click if you are going to add a new RSS Feed to be scraped into your blog. You only have 2 options on this page Feed name, and Feed Url, they are self-explanatory Feed name is whatever you want to call it, and Feed Url is the link to the RSS Feed.
- (V2.2 Update)RSS Category option added, as well as RSS Order capability to the add rss, and edit rss sections.
- Using RSS Scraper - To use the RSS Scraping function first you have to go to the Site Settings page, and click the radio bubble that says RSS Scraper. This will now change your homepage from blog entries you post into an automated RSS Feed Scraper that will populate your homepage for you as the RSS Feeds are updated.
- Buttons with RSS Feed Names - This is all of your RSS Feed entries to date, if you click on the name on the button you will be taken to another screen where you can edit the Feed Name as well as Feed Url. You also can delete the RSS Feed from the edit page by using the red button that says Delete.
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.
- Add Album Button: - This is the button you want to click if you are going to add a new photo album to hold your photos. Once inside this area you have the options to give your album a name, a summary, and an album thumbnail.
- Add Photo(s) Button: - This is the button you want to click if you are going to add new photo(s) to your album. Once inside this area you have the options to give your photo a description, pick a gallery, and upload your photo. All photos and thumbnails must be .png file type.
- Buttons with album names: - This is all of your photo albums that contain your photos. Once you click this you are provided with the options to edit your album details, delete the entire album, or delete individual photos from your photo 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.
- This area is pretty simple you put in your link to your social networking page/profile, and either slide the switch on or off. When the social networking icons of your choice are turned on they are displayed on the contact page of your site at the bottom under the "Call Us" button. The icons are dynamically controlled by the on or off slider switch, and are linked to the whatever you input into the fields under the slide switches.
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