Laravel Material Admin is a Complete Build of Laravel 5.4 and Google Material Design Lite 1.3 with FULL Email and Social Authentication
Laravel 5.4 with user authentication, registration with email confirmation, social media authentication, password recovery, and captcha protection. This makes full use of Controllers for the routes, templates for the views, and makes use of middleware for routing. Uses laravel ORM modeling and has CRUD (Create Read Update Delete) functionality for all tasks. Quick setup, can be done in 5 minutes. It will take longer to obtain your Facebook, Twitter, and Google Plus API Keys than it will to set this up.
Laravel 5.4.x with Material Design Lite 1.1.3 project.
ALaravel Material Admin Features |
---|
Built on Laravel 5.4 and Material Design Lite 1.1.3 |
Uses MySQL Database and include migrations and seeds |
Uses Artisan to manage database migration, schema creations, and create/publish page controller templates |
Dependencies are managed with COMPOSER |
Laravel Scaffolding User and Administrator Authentication |
User Socialite Logins ready to go - See API list used below |
Google Maps API v3 for User Location lookup and Geocoding |
CRUD (Create, Read, Update, Delete) Tasks Management |
CRUD (Create, Read, Update, Delete) User Management |
Users can upload profile background images |
User uploads are in protected storage API |
Google Captcha Protection with Google API |
User Registration with email verification |
Capture IP to users table upon signup |
User Password Reset via Email Token |
User Login with remember password |
User have automatic Gravatar |
User roles implementation |
Eloquent user profiles |
Custom 404 Page |
Quick Project Setup
(Not including the dev environment)
- Run
sudo git clone https://github.com/jeremykenedy/laravel-material-design.git laravel-material-design
- Create a MySQL database for the project
mysql -u root -p
, if using Vagrant:mysql -u homestead -psecret
create database laravel_material;
\q
- From the projects root run
cp .env.example .env
- Configure your
.env
file // NOTE: Google API Key will prevent maps error - Run
sudo composer install
from the projects root folder - From the projects root folder run
sudo chmod -R 755 ../laravel-material-design
- From the projects root folder run
sudo php artisan key:generate
- From the projects root folder run
sudo php artisan migrate
- From the projects root folder run
sudo composer dump-autoload
- From the projects root folder run
sudo php artisan db:seed
View the Project in Browser
- From the projects root folder run
php artisan serve
- Open your web browser and go to
http://localhost
Seeds
- Seeded Roles
- user
- editor
- administrator
And thats it with the caveat of setting up and configuring your development environemnt. I recommend VAGRANT or the Laravel configured instance of Vagrant called HOMESTEAD.
Video/GIF Examples
Project Setup fresh setup
Install Laravel Material Design
laravel-material-design URL's (routes)
/
/login
/logout
/register
/password/email
laravel-material-design Alias Redirect URL's (routes)
/home
/reset
/login
/logout
/register
laravel-material-design Profile Routes
/profile/{username}
/profile/{username}/edit
<- Editing in this view is limited to current user only.
laravel-material-design Admin Routes
/users
/users/create
/users/{user_id}
/users/{user_id}/edit
Laravel-Tasks URL's (routes)
/tasks
/tasks/create
/tasks/{id}/edit
/tasks-all
/tasks-complete
/tasks-incomplete
Get Socialite Login API Keys:
- Google Captcha API
- Facebook API
- Twitter API
- Google + API
- GitHub API
- YouTube API
- Twitch TV API
- Instagram API
- 37 Signals API
Other API keys
Add More Socialite Logins
- See full list of providers: http://socialiteproviders.github.io
Steps:
- Go to http://socialiteproviders.github.io and select the provider to be added.
- From the projects root folder in terminal run compser command to get the needed package.
- Example:
composer require socialiteproviders/twitch
- From the projects root folder run
composer update
- Add the service provider to
/app/services.php
- Example:
'twitch' => [
'client_id' => env('TWITCH_KEY'),
'client_secret' => env('TWITCH_SECRET'),
'redirect' => env('TWITCH_REDIRECT_URI'),
],
```
- Add the API credentials to
/.env
- Example:
TWITCH_KEY=YOURKEYHERE TWITCH_SECRET=YOURSECRETHERE TWITCH_REDIRECT_URI=http://YOURWEBSITEURL.COM/social/handle/twitch
- Add the social media login link:
- Example:
In file
/resources/views/login.blade.php
add ONE of the following:- Conventional HTML:
<a href="{{ route('social.redirect', ['provider' => 'twitch']) }}" class="btn btn-lg btn-primary btn-block twitch">Twitch</a>
* Use Laravel HTML Facade (recommended)
{!! HTML::link(route('social.redirect', ['provider' => 'twitch']), 'Twitch', array('class' => 'btn btn-lg btn-primary btn-block twitch')) !!}
- Example:
In file
--
Environment File
Example .env
file:
APP_ENV=local
APP_KEY=SomeRandomString
APP_DEBUG=true
APP_LOG_LEVEL=debug
APP_URL=http://localhost
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravelAuth
DB_USERNAME=homestead
DB_PASSWORD=secret
CACHE_DRIVER=file
SESSION_DRIVER=file
QUEUE_DRIVER=sync
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379
MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=465
MAIL_USERNAME=YOURGMAILusernameHERE
MAIL_PASSWORD=YOURGMAILpasswordHERE
MAIL_ENCRYPTION=tls
# https://www.google.com/recaptcha/admin#list
RE_CAP_SITE=YOURGOOGLECAPTCHAsitekeyHERE
RE_CAP_SECRET=YOURGOOGLECAPTCHAsecretHERE
# https://developers.facebook.com/
FB_ID=YOURFACEBOOKidHERE
FB_SECRET=YOURFACEBOOKsecretHERE
FB_REDIRECT=http://yourwebsiteURLhere.com/social/handle/facebook
# https://apps.twitter.com/
TW_ID=YOURTWITTERidHERE
TW_SECRET=YOURTWITTERkeyHERE
TW_REDIRECT=http://yourwebsiteURLhere.com/social/handle/twitter
# https://console.developers.google.com/ - NEED OAUTH CREDS
GOOGLE_ID=YOURGOOGLEPLUSidHERE
GOOGLE_SECRET=YOURGOOGLEPLUSsecretHERE
GOOGLE_REDIRECT=http://yourwebsiteURLhere.com/social/handle/google
# https://github.com/settings/applications/new
GITHUB_ID=YOURIDHERE
GITHUB_SECRET=YOURSECRETHERE
GITHUB_URL=https://larablog.io/social/handle/github
# https://developers.google.com/youtube/v3/getting-started
YOUTUBE_KEY=YOURKEYHERE
YOUTUBE_SECRET=YOURSECRETHERE
YOUTUBE_REDIRECT_URI=https://larablog.io/social/handle/youtube
# http://www.twitch.tv/kraken/oauth2/clients/new
TWITCH_KEY=YOURKEYHERE
TWITCH_SECRET=YOURSECRETHERE
TWITCH_REDIRECT_URI=http://laravel-material-design.local/social/handle/twitch
# https://instagram.com/developer/register/
INSTAGRAM_KEY=YOURKEYHERE
INSTAGRAM_SECRET=YOURSECRETHERE
INSTAGRAM_REDIRECT_URI=http://laravel-material-design.local/social/handle/instagram
# https://basecamp.com/
# https://github.com/basecamp/basecamp-classic-api
37SIGNALS_KEY=YOURKEYHERE
37SIGNALS_SECRET=YOURSECRETHERE
37SIGNALS_REDIRECT_URI=http://laravel-material-design.local/social/handle/37signals
// NOTE: YOU CAN REMOVE THE KEY CALL IN app.blade.php IF YOU GET A POP UP AND DO NOT WANT TO SETUP A KEY FOR DEV
# Google Maps API v3 Key - https://developers.google.com/maps/documentation/javascript/get-api-key#get-an-api-key
GOOGLEMAPS_API_KEY=YOURGOOGLEMAPSkeyHERE
Helpful custom functions
-
Dialogs (aka Modal)
- Call Material Design Lite Dialog Box
mdl_dialog(trigger,close,dialog)
- The inputs are optional, the Defaults are as follows:
var trigger = trigger || document.querySelector('.dialog-button'); var close = close || document.querySelector('.dialog-close'); var dialog = dialog || document.querySelector('#dialog');
- Add the desired dialog view to your template view with:
@include('dialogs.dialog-save')
- Substitute with the desired dialog blade.
-
Options
- DELETE DIALOG OPTIONS You can override the delete dialog title and save button text by passing your variables, otherwise the defaults will display.
Example:
@include('dialogs.dialog-delete', ['dialogTitle' => 'Confirm Task Deletion', 'dialogSaveBtnText' => 'Delete'])
-
Datatabes
Give a table functionality with DataTables
a. Within the
@section('template_scripts')
section call the view with:@include('scripts.mdl-datatables')
b. Add class
data-table
to your<table>
to instantiate it as a datatable.c You should add classes
mdl-data-table
andmdl-js-data-table
for MDL styling (not required).d. Optionally exclude/disable any column from being sortable by adding class
no-sort
to the<th>
of the column.e. Optionally exclude/disable any column from being searchable by adding class
no-search
to the<th>
of the column. -
SnackBar / Toast
Use Google Material Design Lite built in notificatons outlined below:
-
Include
@include('scripts.mdl-snackbar')
call in the@section('template_scripts')
section -
Include
@include('partials.mdl-snackbar')
in your template -
Call Snackbar/Toast using JavaScript: EXAMPLES BELOW
- Snackbar
SNACKBAR ACTION(s)
var someActions = function(event) { document.querySelector('.mdl-snackbar-trigger').style.backgroundColor = 'red'; };
SNACKBAR CALL - WITH ACTION(s)
mdl_snackbar({ msg: 'Profile Updated', timout: 4000, // OPTIONAL snackBarTrigger: '.mdl-snackbar-trigger', // OPTIONAL actionText: 'Undo', // OPTIONAL actionHandler: someActions, // OPTIONAL });
- Toast
TOAST CALL - NO ACTION
mdl_snackbar({ msg: 'Profile Updated', timout: 4000, snackBarTrigger: '.mdl-snackbar-trigger' });
- EXAMPLE CTA TO SnackBar/Toast
<button class="mdl-button mdl-js-button mdl-button--raised mdl-snackbar-trigger" type="button">Show Toast</button>
-
File Structure of Common Used Files
laravel-material-design/
├── .env.example
├── .gitattributes
├── .gitignore
├── artisan
├── composer.json
├── gulpfile.js
├── LICENSE
├── package.json
├── phpspec.yml
├── phpunit.xml
├── README.md
├── server.php
├── app/
│ ├── Http/
│ │ ├── kernal.php
│ │ ├── routes.php
│ │ ├── Controllers/
│ │ │ ├── Auth/
│ │ │ │ ├── AuthController.php
│ │ │ │ └── PasswordController.php
│ │ │ ├── Controller.php
│ │ │ ├── HomeController.php
│ │ │ ├── ProfilesController.php
│ │ │ ├── UserController.php
│ │ │ ├── UsersManagementController.php
│ │ │ └── WelcomeController.php
│ │ ├── Middleware/
│ │ │ ├── Administrator.php
│ │ │ ├── Authenticate.php
│ │ │ ├── CheckCurrentUser.php
│ │ │ ├── Editor.php
│ │ │ ├── EncryptCookies.php
│ │ │ ├── RedirectAuthenticated.php
│ │ │ └── VerifyCsrfToken.php
│ │ └── Requests/
│ │ └── Request.php
│ ├── Logic/
│ │ ├── macros.php
│ │ ├── Mailers/
│ │ │ ├── Mailer.php
│ │ │ └── UserMailer.php
│ │ └── User/
│ │ ├── CaptureIp.php
│ │ └── UserRepository.php
│ ├── Models/
│ │ ├── Password.php
│ │ ├── Profile.php
│ │ ├── Role.php
│ │ ├── Social.php
│ │ └── User.php
│ ├── Providers/
│ │ ├── AppServiceProvider.php
│ │ ├── BusServiceProvider.php
│ │ ├── ConfigServiceProvider.php
│ │ ├── EventServiceProvider.php
│ │ ├── MacroServiceProvider.php
│ │ └── RouteServiceProvider.php
│ ├── Services/
│ │ └── Registrar.php
│ └── Traits/
│ └── CaptchaTrait.php
├── config/
│ ├── app.php
│ ├── auth.php
│ ├── cache.php
│ ├── compile.php
│ ├── database.php
│ ├── filesystems.php
│ ├── mail.php
│ ├── queue.php
│ ├── services.php
│ ├── session.php
│ └── view.php
├── database/
│ ├── migrations/
│ │ ├── 2014_10_12_000000_create_users_table.php
│ │ ├── 2014_10_12_100000_create_password_resets_table.php
│ │ ├── 2015_05_15_124334_update_users_table.php
│ │ ├── 2015_10_21_173121_create_users_roles.php
│ │ ├── 2015_10_21_173333_create_user_role.php
│ │ ├── 2015_10_21_173520_create_social_logins.php
│ │ ├── 2015_11_02_004932_create_profiles_table.php
│ │ ├── 2015_12_25_010553_add_signup_ip_address_to_users_table.php
│ │ ├── 2015_12_25_011117_add_signup_confirmation_ip_address_to_users_table.php
│ │ ├── 2015_12_25_025231_add_signup_sm_ip_address_to_users_table.php
│ │ └── 2016_04_19_045644_add_signup_admin_ip_address_to_users_table.php
│ └── seeds/
│ ├── DatabaseSeeder.php
│ └── SeedRoles.php
├── public/
│ ├── .htaccess
│ ├── index.php
│ ├── robots.txt
│ └── assets/
│ ├── css/
│ ├── fonts/
│ └── ~~js/~~
├── resources/
│ ├── assets/
│ │ ├── js/
│ │ │ ├── alerts.js
│ │ │ ├── dialogs.js
│ │ │ ├── mdl-datatables.js
│ │ │ └── spinners.js
│ │ └── sass/
│ │ ├── components/
│ │ │ ├── _alerts.scss
│ │ │ ├── _badges.scss
│ │ │ ├── _breadcrumbs.scss
│ │ │ ├── _cards.scss
│ │ │ ├── _dialogs.scss
│ │ │ ├── _inputs.scss
│ │ │ ├── _lists.scss
│ │ │ ├── _material-icons.scss
│ │ │ ├── _social-icons.scss
│ │ │ ├── _spinners.scss
│ │ │ └── _tables.scss
│ │ ├── layouts/
│ │ │ ├── _auth.scss
│ │ │ └── _dashboard.scss
│ │ ├── partials/
│ │ │ ├── _base.scss
│ │ │ ├── _helpers.scss
│ │ │ ├── _typography.scss
│ │ │ └── _variables.scss
│ │ └── app.scss
│ ├── lang/
│ │ └── en/
│ │ ├── auth.php
│ │ ├── dialogs.php
│ │ ├── emails.php
│ │ ├── forms.php
│ │ ├── links-and-buttons.php
│ │ ├── pagination.php
│ │ ├── passwords.php
│ │ ├── profile.php
│ │ ├── titles.php
│ │ └── validation.php
│ └── views/
│ ├── app.blade.php
│ ├── welcome.blade.php
│ ├── admin/
│ │ ├── create-user.blade.php
│ │ ├── edit-user.blade.php
│ │ ├── show-user.blade.php
│ │ └── show-users.blade.php
│ ├── auth/
│ │ ├── activateAccount.blade.php
│ │ ├── guest_activate.blade.php
│ │ ├── login.blade.php
│ │ ├── password.blade.php
│ │ ├── register.blade.php
│ │ ├── reset.blade.php
│ │ └── tooManyEmails.blade.php
│ ├── cards/
│ │ ├── check-list-card.blade.php
│ │ ├── hero-image-card.blade.php
│ │ └── user-profile-card.blade.php
│ ├── dialogs/
│ │ ├── dialog-delete.blade.php
│ │ └── dialog-save.blade.php
│ ├── emails/
│ │ ├── activateAccount.blade.php
│ │ └── password.blade.php
│ ├── errors/
│ │ ├── 403.blade.php
│ │ ├── 404.blade.php
│ │ └── 503.blade.php
│ ├── modules/
│ │ ├── charts.blade.php
│ │ └── pie-charts.blade.php
│ ├── pages/
│ │ ├── home.blade.php
│ │ └── status.blade.php
│ ├── partials
│ │ ├── account-nav.blade.php
│ │ ├── drawer-nav.blade.php
│ │ ├── form-status.blade.php
│ │ ├── header-nav.blade.php
│ │ └── search-bar.blade.php
│ ├── profiles
│ │ ├── edit.blade.php
│ │ └── show.blade.php
│ └── scripts
│ ├── gmaps-address-lookup-api3.blade.php
│ ├── google-maps-geocode-and-map.blade.php
│ ├── html5-password-match-check.blade.php
│ ├── mdl-datatables.blade.php
│ └── mdl-required-input-fix.blade.php
├── storage/
├── tests/
└── vendor/ <-Note: Compiled with Composer.
Screenshots
Login Desktop
Login Mobile
User Profile Menu
User Top Nav
Mobile Drawer Nav
Admin View - User List Desktop
Admin View - User List Mobile
Alert Error Example
Alert Success Example
Laravel Developement Packages Used References
- http://laravel.com/docs/5.1/authentication
- http://laravel.com/docs/5.1/authorization
- http://laravel.com/docs/5.1/routing
- http://laravel.com/docs/5.0/schema
- https://laravelcollective.com/docs/5.4/html
- http://laravel.com/docs/5.4/authentication
- http://laravel.com/docs/5.4/authorization
- http://laravel.com/docs/5.4/routing
Updates:
Laravel PHP Framework
Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable, creative experience to be truly fulfilling. Laravel attempts to take the pain out of development by easing common tasks used in the majority of web projects, such as authentication, routing, sessions, and caching.
Laravel aims to make the development process a pleasing one for the developer without sacrificing application functionality. Happy developers make the best code. To this end, we've attempted to combine the very best of what we have seen in other web frameworks, including frameworks implemented in other languages, such as Ruby on Rails, ASP.NET MVC, and Sinatra.
Laravel is accessible, yet powerful, providing powerful tools needed for large, robust applications. A superb inversion of control container, expressive migration system, and tightly integrated unit testing support give you the tools you need to build any application with which you are tasked.
Official Laravel Documentation
Documentation for the entire framework can be found on the Laravel website.
Contributing To Laravel
All Laravel Framework related issues and pull requests should be filed on the laravel/framework repository.
Laravel License
The Laravel framework is open-sourced software licensed under the MIT license
Material Design Lite Front-End Framework
An implementation of Material Design components in vanilla CSS, JS, and HTML.
Material Design Lite (MDL) lets you add a Material Design look and feel to your static content websites. It doesn't rely on any JavaScript frameworks or libraries. Optimized for cross-device use, gracefully degrades in older browsers, and offers an experience that is accessible from the get-go.
Dependencies
COMPOSER
COMPOSER can be installed using the following commands:
sudo curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer
COMPOSER on MAC OS X can be installed using the following commands:
sudo brew update
sudo brew tap homebrew/dupes
sudo brew tap homebrew/php
sudo brew install composer