_ ____ __ ________ ______ | | / / /_ ____ _/ //_ __/ /_ ___/_ __/___ _____ _ | | /| / / __ \/ __ `/ __// / / __ \/ _ \/ / / __ `/ __ `/ | |/ |/ / / / / /_/ / /_ / / / / / / __/ / / /_/ / /_/ / |__/|__/_/ /_/\__,_/\__//_/ /_/ /_/\___/_/ \__,_/\__, / /____/
Here's my latest project that came out using Laravel 5. This is called WhatTheTag.
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.
- 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
resourcesfolder. Afterwards, all of the assets are compiled, merged, minified and copied into their own folders in
publicdirectory. 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.
- 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 --versionfrom your terminal.
- npm to install frontend dependencies,
- gulp to compile assets.
You can check all the images at this Imgur album.
- 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
.envfile and fill your database credentials. You can copy it from
.env.examplefile 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
site_namedefines the site's name (will be shown in the title etc.).
twitter_namewill fill the "shared via" section on Twitter share button.
comments_enabledwill enable or disable the comments section in the site. The value is boolean, so set it
falseto disable comments.
disqus_identifieris 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
firstname.lastname@example.orgThe default password is
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.