ImgShare

ImgShare Documentation by Nermin Bajagilovic v1.0.2

ImgShare Application

Created: 14/9/2016
Updated: 24/10/2016
By: Nermin Bajagilovic
Email: nermin@gmail.com

Thank you for purchasing my application. 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. Update
  2. Install
  3. Seed Database
  4. FrontEnd
  5. FrontEnd Pages
  6. Email
  7. BackEnd
  8. BackEnd Pages
  9. Reports
  10. Removal Requests
  11. Tags
  12. Images in Comments Preview
  13. Mention Users in Comments
  14. Sitemap
  15. Seo
  16. Site Settings
  17. Social Sharing
  18. Deploy in Production
  19. Sources and Credits

Update - top

If you aleady have ImgShare installed, unpack everything from the zip file into the folder where you have ImgShare installed and then run:

php artisan db:seed --class=UpdateSeeder

Or you can update by going to Update in Settings. Be sure to backup database and files before doing Update

Install - top

ImgShare application is written in PHP framework Laravel 5.3. When you download it and want to test locally you will have to download and install  XAMPP

You will then unpack the application into htdocs folder. To setup the application you will have to first create database named 'imgshare'. You can do this by going to localhost/phpmyadmin and create a database. After that is done you will have to start Command Prompt if you are on Windows or Terminal if you are on Linux/Mac. CD into folder where the application is installed and type

composer install --no-interaction --no-dev --prefer-dist

To run this command you may have to install composer if you already don't have it. Visit this link to download it https://getcomposer.org/download/

Wait while it downloads all packages and then type if on windows and using cmd

rename .env.example .env

Or if using git bash on windows or on Linux/Mac

mv .env.example .env

.env file is neccessary for Laravel to run and it's here where you store database settings etc. After all this run

php artisan key:generate

This will generate unique application key which is needed for all Laravel based application. This number will be stored inside .ENV file which is found in the root of the application folder. Next you edit the .ENV file and enter these database settings.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=imgshare 
DB_USERNAME=root 
DB_PASSWORD= 
APP_URL=http://your-url.dev
APP_NAME=ImgShare

Don't forget to set APP_URL to your own website address, this setting is important so don't forget to add it.

Also before we do anything else add these in the same .ENV file

APP_ADMIN_USERNAME=admin
APP_ADMIN_EMAIL=admin@imageshare.io
APP_ADMIN_PASSWORD=123456

these will be used to create admin user, here you can decide what username, email address and password will be. Don't forget to add these and save the file before you go further. One last thing, if you are doing this on your own local machine to test the script, add this line as well.

APP_DEVELOPMENT=true

When you put the script on your online server you will have to put this line to false, here you set it to true so that script will generate some random albums/images/comments/votes etc so you can play with script locally. When puting the script on the online server you will want to set it to false.

Now run this command

php artisan migrate

This will create all the tables that the application needs. To create admin user you need to run:

php artisan db:seed --class=InstallSeeder

That's all you need to do to setup the application. To actually visit the application in the browser you need to setup few things. First thing you need to do is open this folder C:\Windows\System32\Drivers\etc and then right click on hosts file and open it for editing. Add this line at the end.

127.0.0.1 imgshare.dev

Next thing you need to do is edit some apache settings. Go to C:\xampp\apache\conf\extra and open httpd-vhosts.conf for editing. Add this to the end of file

<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs/imgshare/public"
ServerName imgshare.dev
</VirtualHost>

Restart the apache server from the XAMPP Control Panel. Wait a few seconds and now if you go to imgshare.dev now you will see this

You can now register and login, or upload images without registering and logging in.

Seed Database - top

If you want you can also add some dummy data to the application so you can see all features in full effect. Run this command to do so

php artisan db:seed

This command will create 50 users, 100 albums, around 400 images, 3500 comments, 400 favorites and around 5000 votes on album and comments. Now you can browse the demo site and test around to see all features. This command will download images from loremipsum.com so running it may take 5 minutes while the images are being downloaded.

You should see following screen after running db:seed it may take some time though to complete before you can see anything.

FrontEnd - top

FrontEnd uses Bootstrap framework, JQuery, SweetAlert2 for popups and technology like Ajax to save album information to database without having to reload the page. FrontEnd features infinite scrolling, comments for Albums are also loaded dynamically as you scroll down the page. This is accomplished with custom javascript. FrontEnd can be customized when it comes to file upload. You can set maximum file size allowed, maximum number of files to upload and accepted file types. To edit these settings open C:\xampp\htdocs\images\public\js\mydropzone.js These are default settings:

parallelUploads: 100,
maxFiles: 100,
acceptedFiles: ".jpeg,.jpg,.png,.gif",
maxFilesize: 5,

If you change max file size allowed you will also need to update php settings to reflect this on the server size. you will need to edit C:\xampp\php\php.ini For example:

; Maximum allowed size for uploaded files.
upload_max_filesize=5M

; Maximum number of files that can be uploaded via a single request
max_file_uploads=100

; Maximum size of POST data that PHP will accept.
; Its value may be 0 to disable the limit. It is ignored if POST data reading
; is disabled through enable_post_data_reading.
post_max_size=0

FrontEnd Pages - top

Pages have been added and currently there is support for About Us, Contact Us, Terms of Service, Privacy Policy, Request Removal

 

Email - top

For your site to functional normally and for users to be able to contact you using the provided contact form you must setup email. I suggest mailgun.com with them you get 10,000 emails free every month which should be more then enough to get you started. When you sign up with them you will recieve username and password and api based url and api key, you will need to enter all these in your .ENV file example follows:

MAIL_DRIVER=mailgun
MAIL_HOST=smtp.mailgun.org
MAIL_PORT=587
MAIL_USERNAME=postmaster@imageshare.code4fun.io
MAIL_PASSWORD=your mailgun password here
MAIL_ENCRYPTION=tls
MAILGUN_DOMAIN=imageshare.code4fun.io
MAILGUN_SECRET=key-your-secret-api-key

BackEnd - top

BackEnd uses Bootstrap framework,  AdminLTE, JQuery, SweetAlert2 for popups. In Backend you as admin can view latest added albums and images. You can choose to delete albums and images. To access the admin you need to go to imgshare.dev/admin. Before you can access that you need to login as administrator user. Only admins are able to access that link, normal users will be denied access to that page. When you run php admin db:seed admin user is created. You can use that user to login as admin. Enter email: admin@imageshare.io and password: 'password'. When you are logged in now you can go to imgshare.dev/admin

BackEnd Pages - top

Here you can administer your sites pages. Currently supported pages are About, Terms of Service, Privacy Policy, Contact Us and Request Removal.

You can also order the pages, this will affect in what order they appear on frontpage.

You can choose template for the page

Currently col-md-8 is used and that decides how many columns the page take. You can go up to 12, and down to 4. col-centered centers the page, if you wan't page left aligned then remove col-centered.

Reports - top

Reporting has been implemented. Now your users can report published albums and other user's comments. You can administer these reported albums and comments in admin area. It looks like this:

You get to decide what happens to reported user, options are to do nothing, ban or delete the user. With album options are to do nothing, delete, unpublish and set to mature. When user or album are deleted, images are deleted but users and albums data still persist in database, they are not deleted but are hidden from everyone. User will not be able to login and visiting his profile results in 404. Users and Albums are kept in database for purpose of having a history of what has happend, so in case you need to look up why someone was deleted and the reason why action was taken it's possible with current code. If you still want to remove deleted user/album from database I will add that option in comming update.

Removal Requests - top

Removal Requests has been implemented. Now your users and visitors can request image removal using simple form that looks like this:

You can administer these requests in admin area. Interface for that looks like this

You can view individual removal requests and decide what to do with them.

You can also view closed removal requests and see who closed it and what was done.

 

Reports - top

Reporting has been implemented. Now your users can report published albums and other user's comments. You can administer these reported albums and comments in admin area. It looks like this:

You get to decide what happens to reported user, options are to do nothing, ban or delete the user. With album options are to do nothing, delete, unpublish and set to mature. When user or album are deleted, images are deleted but users and albums data still persist in database, they are not deleted but are hidden from everyone. User will not be able to login and visiting his profile results in 404. Users and Albums are kept in database for purpose of having a history of what has happend, so in case you need to look up why someone was deleted and the reason why action was taken it's possible with current code. If you still want to remove deleted user/album from database I will add that option in comming update.

Tags - top

Tags have been added. Currently you can just define tags using admin. It looks like this:

The idea with tags is that users will be able to use them to tag albums they share to community. Right now that part is not implemented but it's comming in next update.

Images in Comments Preview - top

Images that are inserted in the comments are turned into links that can be previewed when user hovers above them. Only links from your own website and imgur are turned into links and be able to preview, this is for security reasons.

Mention Users in Comments - top

Users can mention other users in comments by using @username, this will be turned into link to user profile. Currently user is notifed about this but in future updates it will be added so that user gets notified when mentioned.

Sitemap - top

Separate sitemaps are generated for albums, images, users and tags. Sitemaps are cached. Default cache time is 10 minutes. You can change this under Settings/Sitemap

Seo - top

You can enable seo links for published albums. All links generated by application will then use album title for the link in this format imgshare.io/post/this-is-album-title

Site Settings - top

Here you can set site name, title, description and keywords. These will be used to create site's metadata which is useful for SEO.

Google Analytics, here you can insert your google analytics code

Next you can enter code you get from your ads provider:

Ads will be shown at top of the album/image pages and at sidebar in the album and image pages. Ad will also be shown above and between comments.

You can enable seo links for published albums, do so here

Social Sharing - top

I've implemented what I think is the best way to add social sharing to this application so you the customer will be able to customise it however you like, add as many social sharing networks as you want, round or square buttons, colors, etc you will be able to do it all. You will need to go to https://www.addthis.com/get/share and sign up with that service.

Click on activate and it will take you to sign up page. Sign up and it will log you in. After you have been logged in you will see following screen, choose Inline and press Continue.

On this next screen you will see this:

Select the 'Select your own' option so you will end up with this

If you want to add more services click on 'Add more services' and add networks you want your website to support. After you are done click on Design. You will be taken to Design screen where you can play with the options. I suggest medium 20x20 size for icons, rounded corners, logo color whit, icon background color brand colors and hide network names. That generates good looking icons. However you are free to do as you wish.

When you are done, click on < Design in the left upper corner so it takes you a step back. Now click on Save & Continue. You should see following screen.

You need to copy this part: //s7.addthis.com/js/300/addthis_widget.js#pubid=ra-57e12b521e0c1ff7 Now go to your admin area and go to newly added settings area. As show on this screen:

Add the code you copied earlier to Social Buttons Widget just as shown on the screen and save. That's it, you now have social sharing on your website and you get to customise how it looks and how many sharing networks you want to have.

Deploy in Production - top

When you deploy application to online server you need to run

php artisan db:seed --class=InstallSeeder

This will create admin user that you specifed in .ENV file, some site settings and pages.

Deploying Laravel applications is not walk in the park, so I am offering installation service for those users who have not yet bought their server. If you aleady have a server then I can't help you much with deployment to that server, you will have to figure it out for your self how to actually deploy Laravel application and then apply any upcomming updates that I release for this application. If you haven't yet got a server then I can help you with a cheap solution that will cost you around 20$ a month, be easy to manage, server will automatically be updated with latest security patches.

Server will come installed with Ubuntu 16 x64, Nginx, PHP7 and MariaDB and you will get to choose between following regions for your server: New York, San Francisco, Amsterdam, Singapore, London, Frankfurt, Toronto, Bangladore. Using my proposed solution after I setup everything for you you will be able to apply comming updates to ImgShare application with a click of a button. You will not have to manage the server unless you want to and worry about installing security patches.

I will also help you setup free CDN with your website which will speed up your website alot so that you will spend less bandwidth. Read more about CDN technology here: CDN

Price for this help is one time fee of 50$.

If you want me to help you out and decide to take my offer contact me using my codecanyon page https://codecanyon.net/user/nermion

F) Sources and Credits - top

I've used the following icons which I bought so I don't need to actually mention the creators but here they are:

Nermin Bajagilovic

Go To Table of Contents