_ ____ __ ________ ______
| | / / /_ ____ _/ //_ __/ /_ ___/_ __/___ _____ _
| | /| / / __ \/ __ `/ __// / / __ \/ _ \/ / / __ `/ __ `/
| |/ |/ / / / / /_/ / /_ / / / / / / __/ / / /_/ / /_/ /
|__/|__/_/ /_/\__,_/\__//_/ /_/ /_/\___/_/ \__,_/\__, /
/____/
Hey all,
Here's my latest project that came out using Laravel. This is called WhatTheTag.
Why?
There are some reasons behind this project.
- Firstly, I needed this. I didn't like Picasa's web interface, Lost tags of ~600 photos thanks to Picasa, 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.x and to make a sample application that uses various features of Laravel 5.x.
- 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 inresourcesfolder. Afterwards, all of the assets are compiled, merged, minified and copied into their own folders inpublicdirectory. 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.5's server requirements
- Composer to install 3rd party dependencies
- npm to install frontend dependencies
- gulp to compile assets
- A free account from Algolia to make the searches work properly.
Showcase
Main page
Listing pages, also the hover effect
Clicking to "zoom" on a list page
Photo detail 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
- (optional) Thirdly, compile and install assets (Repository holds pre-compiled assets inside)
npm install -g gulp
gulp
- Now, (if not created already,) create an
.envfile and fill all of your credentials required for the service to run. You can copy it from.env.examplefile as a template.
cp .env.example .env
- 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
.envfile andconfig/whatthetag.php: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 itfalseto 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. -
Lastly, we need to set Algolia parameters, simply run
php artisan tinkerin the terminal, and paste the following:\App\Photo::setSettings();
This step will create the indice, and set the settings for Algolia.
-
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 iswhatthetagDon'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.
- Has an authentication system, and role-based access middlewares.
- Uses a 3rd party service for search on client side, and sets the records on the server side.
Donations
Any donations would be highly appreciated. You can buy me a cup of coffee by donating some bitcoins to this addres:
1QFHeSrhWWVhmneDBkArKvpmPohRjpf7p6
Thanks in advance!
TODOs
Dynamic searching (Search as you type)- Caching
Better file uploads, such as Dropify- Every front-end photo pages should be served using Algolia
- ~~Algoliasearch-laravel should be changed with Laravel Scout.~
Changelog~
0.5.0
- Script upgraded to Laravl 5.5
- Algolia Back-end Client changed to a more up-to-date engine, called Laravel Scout
- One of the modal views fixed to show images properly.
0.4.0
- Algolia implementation!
- AWS S3 implementation!
- All dependencies are updated
- Rollback to gulp for asset automation
0.3.1
- Assets now have relative path so that the script runs smoothly both with http and https protocols
- Croppa configuration has been updated for upscales for the cases when the image is too small
- Admin panel photo search is fixed.
0.3.0
- Got Gulp Switched with sey, made by Eser Özvataf. This way, assets building will be easier.
- All dependencies' versions updated.
- Minor code optimisations.
- All configuration values are now fetched from environment vars. Check
.env.examplefile and find all variables prefixed withWTT_. - A new trait added for random methods, so it will run out of the box also with Postgres etc.
0.2.2
- Dropify integrated to upload forms. You can now drag & drop the images!
- Custom 404 page added for the situations when debug is closed.
- Tabs are switched with four spaces in (hopefully every part of the) project.
0.2.1
- Got Sass switched with Less, because there is almost no need for Sass, and it brings additional installations of Ruby and Sass to the server. This way it's lighter. Thanks to @eserozvataf
0.2.0
- Application updated to Laravel 5.1
- Assets and Requirements updated
0.1.0
- First Release
Thanks
- Koding, all of baby steps of the project is written on the cloud using Koding's service on their VMs and my machine 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.
86 Dec 16, 2022
1 Nov 28, 2021
1 Nov 26, 2022
17 Dec 30, 2022
6 Jun 7, 2023
12 Oct 12, 2022
51 Sep 22, 2022
35 Dec 19, 2022
13 May 16, 2022
686 Dec 28, 2022
3.5k Jan 8, 2023
68 Dec 12, 2022
658 Jan 6, 2023
1 Jan 11, 2022
230 Dec 27, 2022
931 Dec 24, 2022
16 Nov 23, 2022
145 Apr 13, 2022
6 Aug 25, 2022