_       ____          __ ________       ______           
| |     / / /_  ____ _/ //_  __/ /_  ___/_  __/___ _____ _
| | /| / / __ \/ __ `/ __// / / __ \/ _ \/ / / __ `/ __ `/
| |/ |/ / / / / /_/ / /_ / / / / / /  __/ / / /_/ / /_/ / 
|__/|__/_/ /_/\__,_/\__//_/ /_/ /_/\___/_/  \__,_/\__, /  
                                                 /____/   

Hey all,

Here's my latest project that came out using Laravel 5. This is called WhatTheTag.

##Why?

There are some reasons behind this project.

• Firstly, I needed this. I didn't like Picasa's web interface, and I wanted to make a simple website that I could search my photos (actually my "internet meme folder") efficiently.
• I wanted to play with Laravel 5 and to make a sample application that uses various features of Laravel 5.
• I also wanted to play with some asset management tools such as Gulp.

After deciding to make this app, it took maybe a week or so in my spare times to pull this application together.

##Features

• This application's main feature is to upload, tag, list and search photos, so you can access to your photos easier.
• There is multi account support, also there are two roles of users called user and admin.
• All assets are handled using gulp. You just need to add or edit the assets in resources folder. Afterwards, all of the assets are compiled, merged, minified and copied into their own folders in public directory. I specifically didn't use Laravel Elixir, because I think using this way it's more flexible.
• The app shows Random Photos in the main page
• You can list Recent Photos from the navigation menu called Recent Photos.
• You can make a search. This feature searches in Photo's title, Photo's uploader's name and in the tags that are attached to the photo. You may assume this is sort of a global search.
• There are also pages such as "user's uploaded photos", "all photos tagged with xx".
• You can preview the photos in a Bootstrap modal, and download directly.
• There is also a photo details page. In this page there are Disqus comments, and social buttons.
• In administration panel, while uploading / editing a photo, you may also fetch the EXIF data of a photo directly and add them into the tags. So let's say you've already tagged a photo before. If it's tagged normally, the system gets the tags and adds them into the tags list of the photo.
• You can also preview the photo before uploading.

##Requirements

• Laravel 5.0's server requirements,
• Composer to install 3rd party dependencies,
• Ruby Required for gulp-ruby-sass,
• Sass >= 3.4 Required for gulp-ruby-sass. You can check it by running sass --version from your terminal.
• npm to install frontend dependencies,
• gulp to compile assets.

##Showcase

Main page

Listing pages, also the hover effect

Clicking to "zoom" on a list page

Admin panel, user management

Admin panel, photo management

Admin panel, adding / Editing a photo

You can check all the images at this Imgur album.

##Installation

• First, clone the repository into your server

git clone https://github.com/Ardakilic/WhatTheTag.git

• Secondly, install dependencies

composer install
npm install

Alternatively, you can also update dependencies with

composer update
npm update

• Thirdly, compile and install assets

gulp clean
gulp

• Now, create an .env file and fill your database credentials. You can copy it from .env.example file as a template.

• Now, install the database schema from migration, and seed the users table for the administrator user:

php artisan migrate
php artisan db:seed

• Now, edit the app-specific configuration files found in config/whatthetag.php:

  • site_name defines the site's name (will be shown in the title etc.).
  • twitter_name will fill the "shared via" section on Twitter share button.
  • comments_enabled will enable or disable the comments section in the site. The value is boolean, so set it false to disable comments.
  • disqus_identifier is your unique identifier in your Disqus panel. You can create a new identifier for your website by following this link

• Make sure the /public/uploads/ folder is writable.

• Now, simply run the application. You can create a new virtualhost either from Apache, or Nginx etc.

  Note: PHP's own web server (e.g. if you're running it with php artisan serve) will give 404 erros in administration panel, because Datatables's AJAX links are quite long, and it gives 404 errors on very long links unless you edit this setting.

• Now you can login into your application.

  Default username is [email protected] The default password is whatthetag

  Don't forget to change these after logging in!

• Now, simply navigate through your app and enjoy! 😄

##Digging the Code? Well, you should do this!

Why you may ask. Because one of the reasons of this app is to make a sample application using Laravel 5.

This application covers:

• Simple CRUD (Create, Read, Update, Delete) operations in Laravel 5.
• Eloquent Relationships. You can see live examples of BelongsTo, HasMany, BelongsToMany relationships in this app.
• All the contents are accessed using slugs. Managing slugs are handled with a 3rd party package.
• Listing content dynamically using Datatables in Administration Panel with a 3rd party package.
• Example usage of Masterpages for views.
• Downloading popular assets (jQuery, Bootstrap, FontAwesome etc.) from npm repositories, compile and merge them with application's own assets.
• Handling file uploads and processing them.
• Reading EXIF data from an uploaded image using PHP.
• Has an authentication system, and role-based access middlewares.

##Thanks

• Koding, all of the project is written on the cloud on Koding's servers directly from my browser. You must definitely try the service, also it's free!
• Burak Can and Eser Özvataf for their ideas especially while handling assets.