Introduction
Please carefully read this guide in order to fully configure this template, and remember to test it on browsers like Chrome, Safari or Firefox.
PLEASE NOTE that this template has been tested on a server hosted by GoDaddy, so I recommend you to use this hosting service, I cannot guarantee you that the files of this template will work properly on different hosting providers.
Quick Start
BEFORE uploading the php file of the Website files folder into your own server, you must create a free account on back4app.com, and a Parse App in its Dashboard.
Then open Configurations.php with your favorite text editor (Sublime text, Notepad, Visual Studio, Atom, etc.) and replace the following strings with your Parse App’s App ID and REST API Key and Master Key (you can get them by entering the Core Settings box in your Apps Dashboard - see the Database section for more info):
// REPLACE THIS STRING WITH YOUR OWN 'App Id' FROM back4app
'K7SCPO9S6zywk3DMoEskABkJCOOWNkwx6Lfew2hy',
// REPLACE THIS STRING WITH YOUR OWN 'REST API Key' FROM back4app
'36wktNAIFNtBv2oIBCn13j6GOzn3sbFrr69gZRNj',
// REPLACE THIS STRING WITH YOUR OWN 'Master Key' FROM back4app
'FavUOcCXERpl2esVRr3s4IcrDiKVYVDyVD8N7c5A' Great, you may now upload all the files and folders from the Website files folder to your own server via an FTP client app like Filezilla. The installation of the .php files and folders into your own server is super easy, just connect Filezilla to your server, select all files contained in the Website files folder and upload them, like this example:
PLEASE NOTE that you do not have to manually create any Column or Class in your Parse Dashboard (the database), they get automatically generated by the Parse SDK while interacting with this website.
General
Server requirements
You must have your own domain and hosting - buy it on GoDaddy, or from other hosting providers, but DO NOT USE 000webhost.com or any other free hosting websites - and make sure you have PHP enabled and updated to the 5.4 version or higher.
Also, you need to install the SSL Certificate and enable it in your own hosting server, usually this option comes apart from the hosting purchase. If you don’t buy and enable SSL, this website won’t work properly, especially when it comes to Location detection. So just make sure you have SSL and PHP enabled BEFORE uploading the files of the Website files folder into your own server.
CSS style
The Website files folder contains the main.css file that handles the CSS layout of this template. You can find it into the css folder. Open it with your favorite text editor software and check it out.
JS Main functions
The Website files folder contains the main.js file that handles some of the main functions of this template - such as login, signup, reset password, etc. You can find it into the js folder. Open it with your favorite text editor software and check it out.
Custom Google font
The font used by this theme is Poppins, and you can find its @import statement into the main.css file:
You are free to import other fonts from the Google Fonts Library, import them into the main.css file and replace the 'Poppins' font name with your new one in the body code:
body {
margin: 0;
font-family: 'Poppins', sans-serif;
...Images
The Website files folder contains the images folder, where you can find all the icon images used in this template. Replace those images as you wish, just don’t change their size, name and extension, so you won’t have to edit a single line of code to show them in your own version of this theme.
The src folder
Do not edit any the name of this folder, NOR the files that it contains, which are the Parse and Facebook SDK’s, so the engine of this template.
Ad Leaderboard banner
In the header.php file, you can find the following code:
<!-- Advertisement Leaderboard space -> replace this line of code below with your Ad code here: -->
<img src="images/leaderboard.jpg">As the comment says, you must replace that line with your own Ad leaderboard banner code. Usually, a Leaderboard banner size is 768×90 px.
Terms of Use and Privacy Policy
Open the tos.php file form the Website files folder and edit it accordingly to your own Terms of Service and Privacy Policy. Also, replace the APP_NAME words with the new name you assigned to your App.
Please also pay attention to this line:
"mailto:[email protected]">[email protected]
There are a few identical lines like that in the tou.html file, so you must replace [email protected] with a valid email address where people can contact you for any question, feedback or in case they want to delete their account.
Delete a User’s account upon request
Accordingly to GDPR Terms, you have 24 hours to delete an account after receiving a deletion request. In order for you to delete an account, you first need to identify the user’s row in the User class of your Parse Dashboard, keep a note of its objectId value, select that row and click Edit -> Delete this row.
Then, just search for that objectId‘s value you’ve previously noted in all the other Classes of your database, check out all the rows until you’ll find that objectId and delete it - this is in case it appears into some Array type columns.
Reported content
People are allowed to report inappropriate/offensive User, Questions or Answers.
So you should daily check your Parse Dashboard - the database - in order to see the column called reportedBy - in the User, Answers and Questions classes - has some cell with a value (a string of the objectID of the reported Question, Answer or User, and take action for it asap.
You may delete the abusive User or Question of Answer from your database forever by selecting a row and click Edit -> Delete this row from the menu on the top-right corner of the Parse Dashboard, but please note before deleting a user from the User class you must note its objectId and search for it in the other classes, if you’ll find the same objectId in a cell of the other classes, you’ll have to remove that string as well, so the app won’t crash and the deleted content will not be visible in the app.
Configurations
The Configurations.php file
You can find this file into the Website files folder. Open it and keep reading this guide, you’ll have to perform some edits in this file in order to get your template ready to run on your server. So open up the Configurations.php file and perform the following edits.
- Website name
Replace the string of this variable with the name you want to give to this template:
$WEBSITE_NAME = "Askk";- Website path
Replace the string of this variable with the URL of your website, which is the path where your uploaded files are located:
$WEBSITE_PATH = "https://xscoder.com/askk/";For instance, if you’ve uploaded the files of the Website files folder into the root directory of your server, the string you’ll have to set should look like this:
$WEBSITE_PATH = 'https://yourdomain.com/';Instead, if your files are located into a directory, you’ll have to append that directory name to your domain’s URL, like this:
$WEBSITE_PATH = 'https://yourdomain.com/yourdirectoryname/';IMPORTANT: you must put the / at the end of your string!
- Main Color
You can replace the HEX value of the variable below as you wish, it’s the main color of this template:
$MAIN_COLOR = "#8344af";- Footer text
You can replace the string of the variable below as you wish, it’s the text that shows up in the footer:
$FOOTER_TEXT = '©2019 XScoder - All Rights reserved';- Facebook SDK Keys
Replace the strings of the variables below with the App Id and Secret key of your Facebook App (see the Facebook Login section to learn how to configure Facebook login):
$FACEBOOK_APP_ID = "202391853740601";
$FACEBOOK_APP_SECRET = "f972b67f6d35c6f57d35bc93f703628a";- Mobile versions links
Replace the strings of these variables with the links to your mobile apps on the App and Play Store:
$IOS_APPSTORE_LINK = "YOUR_APPSTORE_LINK";
$ANDROID_PLAYSTORE_LINK = "YOUR_PLAYSTORE_LINK";- List of Categories and Colors
The following array contains a list of Categories which are being used in this template.
You can edit them as you wish since they are just strings, but please note that every time you’ll change a name of a Category in this array, you must also change the name of its relative icon in the images/categories folder accordingly:
$categoriesArray = array(
// First fixed Categories (NOTE: these 3 items must alwasy be at the first index position)
"latest",
"trending",
"answer",
//---------------------
// Categories:
"photography",
"health",
"tech",
"movies",
"politics",
"music",
"psychology",
"books",
"sport",
"science",
"education",
// YOU CAN ADD CATEGORIES HERE, ALL LOWERCASED...
);As you can see by the above array, the first 3 items are separated from the other ones, this is because they are fixed categories and won’t be loaded once you are about to post a Question. Those 3 categories are for the Home page to filter questions by Trending (the first 100 questions that have 2 or more answers), Latest (the 100 newest posted questions) and Answer (those questions that don’t have any answer yet).
So if you want to add a new Category, just add it below this comment:
// YOU CAN ADD CATEGORIES HERE, ALL LOWERCASED...And DO NOT EDIT the first 3 items of the $categoriesArray, which are the following:
"latest",
"trending",
"answer",PLEASE ALSO NOTE the following array of colors:
$colorsArray = array(
"#000000", // latest
"#444444", // trending
"#777777", // answer
//-------------------------------
"#8344af", // photography
"#ed5564", // health
"#fc6d52", // tech
"#d870ad", // movies
"#8cc051", // politics
"#5d9bec", // music
"#48cfae", // psycology
"#39bf68", // books
"#8344af", // sport
"#ed5564", // science
"#fc6d52", // education
// YOU CAN ADD COLORS HERE...
);Similarly to the $categoriesArray, this array stored the HEX color values of each category, based on their position (the array’s index).
If you want to add a new category, let’s say Lifestye for instance, just follow these simple steps as an example:
Add the category name in the $categoriesArray, ALL LOWERCASE CHARACTERS, like this:
"lifestyle",
Add its HEX color value in the $colorsArray right below the last item, like this:
"#ed5564",
Lastly, create your own PNG icon for your new category and save it in the images/categories folder, just name your image file with the LOWERCASE name of your new category (so lifestyle.png)
Done. Just repeat the steps above to add new Categories.
! Code you do not have to edit !
Do not edit the code you see below this comment in the Configurations.php file, otherwise the website will stop working:
// ------------------------------------------------
// MARK: - PARSE DASHBOARD CLASSES AND COLUMNS
// ------------------------------------------------Database
You should perform the following configurations BEFORE uploading the website files into your own server!
The backend of this template is Parse Server hosted on back4app.com.
After performing the configurations mentioned below, you will run the app and see no content, the Intro screen will show up and you’ll be able to Sign Up in order to create a test account and start testing the app.
Due to the high-performace code of this template and the FREE back4app plan’s limits, you will be able to test this template for a while, but it may happen that you’ll receive an email from back4app telling you that you have reached the monthly plan’s limits and you should upgrade your plan.
I suggest you to do that and just subscribe for a Starter Plan - it’ only $4.99/month - so you will get more Database Storage and API requests/second/month than the FREE Plan. This paid subscription will also increase the loading speed of the app and can be enough for a good amount of users using your app. Check out the pricing table here
So, follow these steps to set up your own database:
Unless you already have an account on back4app.com, create one - it’s FREE!
Enter My Apps and click on Build new app:
Type your App name and click CREATE:
Wait for the website to create your app - it’ll take just a few seconds - then you’ll be redirected to the Dashboard (the database interface, which looks like an Excel file):
You’ll see it empty, but don’t worry, it’ll get data while you’ll start using your template.
Click on Server Settings from the left side menu:
Click on SETTINGS in the Core Settings box:
In the following page, you’ll have to copy the App Id, REST API Key and Master Key, and replace the strings into Configurations.php - as mentioned already in the QuickStart section of this guide:
// REPLACE THIS STRING WITH YOUR OWN 'App Id' FROM back4app
'K7SCPO9S6zywk3DMoEskABkJCOOWNkwx6Lfew2hy',
// REPLACE THIS STRING WITH YOUR OWN 'REST API Key' FROM back4app
'36wktNAIFNtBv2oIBCn13j6GOzn3sbFrr69gZRNj',
// REPLACE THIS STRING WITH YOUR OWN 'Master Key' FROM back4app
'FavUOcCXERpl2esVRr3s4IcrDiKVYVDyVD8N7c5A' Click the BACK button on the bottom of the page to go back to your App Dashboard, then click SETTINGS in the Cloud Code box:
Click on + ADD and navigate to the folder you’ve downloaded from codecanyon in order to upload the main.js file to back4app.
Once main.js has been uploaded in this section, you can check it out by simply clicking its name from the cloud directory - if you can see its code in the blue area on the right side, it means the upload has been successful.
Click the DEPLOY button and wait for a success alert, then go back to your App Dashboard by clicking Server Settings from the left side menu.
The main.js is a Javascript file that is absolutely useful for this app, since it allows it to perform some custom functions, so don’t forget to upload it into the Clod Code section 😉
Now enter the Verification emails box:
Check the Verify User Emails mark and set the Reply-to Address and Display Name fields as you wish:
Good job, your app is now connected to your own database and you can finally run and test it.
PLEASE NOTE: If you already bought the iOS and/or Android version of this template, you don’t need to create a new Parse App, nor upload the main.js file in the Cloud Code section.
Just add the App ID and Client Key strings of your Parse App on back4app into the Configurations.java and/or Configurations.swift file and you’ll be fine.
The power of Parse Server is that you do not have to manually create tables and columns in the database - like you would have to do in MySQL - because the SDK will automatically create Classes and columns in your Parse Dashboard while using the template!
TIP: In case you want to use a custom CMS admin panel to manage your database instead of the Parse Dashboard, watch this video to see how to create a FREE FOREVER Admin panel on Adminca.com for your Parse App:
Facebook login
Enter your Facebook Developer page at https://developers.facebook.com/apps/
Click + Add a New App button
Type the name of your app and your contact email address in the popup window that just showed up.
Click the Create App ID button and pass the Security check that Facebook will prompt out.
After that, the browser will show your Apps Dashboard.
Click on Settings -> Basic in the left-side menu.
In the Privacy Policy URL type your website’s URL.
If you don’t have any Privacy policy page loaded in your own server or website, don’t worry about it, you may either create one and upload it to a free hosting server like 000webhost.com or just place any URL, even “http://example.com/“, is ok, Facebook staff doesn’t make ay check for it yet. of course it would be good to create and upload a Privacy Policy HTML or PHP page someday in your own server and change that URL with the one of your page 🙂
Now select a Category, upload a 1024x1024px or 512x512px app icon image and click Save Changes on the bottom of the page.
Then type the Domain name of your website (for instance, if your website URL is https://mywebsite.com, then you must type mywebsite.com only - without https://) in the App Domains field.
Ignore the Business Use and Data Protection Officer Contact Information sections in case you’re not doing any business in Europe (this is intended for companies, not individual developers or people).
Click on Settings -> Basic in the left-side menu.
Copy the App ID and use it to replace the following string into the Configurations.php file:
$FACEBOOK_APP_ID = "202391853740601";Go back to your Facebook App’s page, click on the Show button in the App Secret field. Facebook will ask you to type your password. Do it and then copy the App Secret string and use it to replace the one in Configurations.php:
$FACEBOOK_APP_SECRET = "f972b67f6d35c6f57d35bc93f703628a";
Scroll down and click + Add Platform, then select Website:
In the Site URL field, type the URL of your website (the one that points to index.php), then click Save Changes:
Now click Facebook Login -> Settings in the left-side menu.
In the Valid OAuth Redirect URIs field, type the URL of your website again - with www. included - followed by /fb-callback.php.
Example: https://www.mywebsite.com/fb-callback.php
Then click the Save Changes button on the bottom of the page.
Click the OFF switch on the top-right corner of the page.
Click the Confirm button in the alert that shows up - you can ignore its message, the Facebook Login will still work in your template:
Now go back to your App Dashboard on back4app, scroll down and click SETTINGS in the Facebook Login box:
Paste your Facebook App ID in the text box and click the + button to add it to your Parse App.
Great, you’re done with the Facebook Login settings!
PLEASE NOTE that if you already bought the iOS and/or Android verison of this template, you don’t need to create a new Facebook app.
Just add the Android and/or iOS platform to your existing Facebook App, perform the settings explained above and use the same APP ID.
Useful stuff
F.A.Q.
Parse Server hosted on back4app
Parse Server is a powerful JSON backend based on Node.js, and its hosted on back4app.com.
Click here to learn more about this backend
Can I host Parse Server on my own server?
You may do so, but please note that I do not provide support for it because it’s pretty complex to configure Push Notifications and Cloud Code jobs, that’s why my templates use back4app - it allows those setups to be made quickly and easily.
If you still want to try to host Parse Server on Heroku or your own server, you should refer to the official Parse Server Guide at parseplatform.org.
What kind of support is offered?
Free support is offered in case of bugs encountered in the original template, either in the code or the UI design.
In case you have edited the code - and so created bugs because of your editing - I may apply some fee to fix your bugs by a remote connection through AnyDesk, or by you sending me your source code for verification.
Should I use Android Studio to edit this template?
Yes, you must always use the latest stable official version of Android Studio to edit this application - NO Betas, they don’t work properly!
Download Android Studio
I’ve performed all configurations mentioned in this Guide, but something is wrong. What should I do?
• Check if you have SSL enabled in your hosting provider’s website
• Check if you’re using either Chrome, Sarafi or Firefox browsers
• Check if you’ve set the correct website path/URL in the Configurations.php file
What hosting provider is best?
Based on my experience and tests, GoDaddy is the best hosting/domain provider ever so far. The demo website files of this template are hosted on GoDaddy, fair prices and stable servers, so I am unable to guarantee you that the files of this template will properly work on other hosting providers.
I’m getting an Internal Server error (500) while trying to save an item with image attached
Enter the MultiPHP INI Editor form your cPanel and enable the following options:
