Web Admin Backend Development with UI : Laravel Admin Panel

Any web app required a very flexible and extensible way of building the custom Laravel 5 applications. Like : administrative tasks – Users, Roles and Permissions management etc. Mostly we require a backend interface to make the application.

So here are the some good Open Source Laravel admin system to build a good backend application with good admin theme/UI.

1.) Laravel 5 Boilerplate / Starter kit with Gentelella Admin Theme
Laravel Boilerplate provides a very flexible and extensible way of building your custom Laravel 5 applications.
Full detail feature available here
https://github.com/Labs64/laravel-boilerplate
https://colorlib.com/polygon/gentelella/index.html

2.) An other Laravel 5.7 Boilerplate with CoreUI Admin Theme
Laravel Boilerplate provides us with a massive head start on any size web application. It comes with a full featured access control system out of the box with an easy to learn API and is built on a Bootstrap foundation with a front and backend architecture.
Full detail feature available here
https://github.com/rappasoft/laravel-5-boilerplate
http://laravel-boilerplate.com/5.7/start.html
https://coreui.io/#live-preview

3.) Voyager : Laravel Admin Package
a Laravel Admin Package that includes BREAD(CRUD) operations, a media manager, menu builder, and much more. It will take care of all administrative tasks, this way we can focus on what we do best, which is building the next kick-ass app!

Full detail feature available here
https://laravelvoyager.com/
https://github.com/the-control-group/voyager
https://voyager.readme.io/docs/installation

4.) LaraAdmin: a Laravel CRM for quick-start Admin based applications
LaraAdmin is a Open source Laravel Admin Panel / CMS which can be used as Admin Backend, Data Management Tool or CRM boilerplate for Laravel with features like Advanced CRUD Generation, Module Manager, Backups and many more.
LaraAdmin is a Open source CRM for quick-start Admin based applications with features like Advanced CRUD Generation, Schema Manager and Workflows.
LaraAdmin is a remarkable package offering us a complete set of utilities we will ever need as a CRM / Admin Panel. Whether creating a CMS, Backend Panel or CRM – LaraAdmin’s unique and flexible utilities has covered
LaraAdmin comes with quite a few predefined modules. They help us to get to know the system, but, on the other hand, if I had to create my project from scratch, it would take me some time to get rid of those LaraAdmin defaults.
Snapshots:

Full detail feature available here
http://laraadmin.com/
https://github.com/dwijitsolutions/laraadmin

5.) Quick adminpanel builder package for Laravel 5 : admin panel generator QuickAdminPanel: Quick adminpanel builder package for Laravel 5

Full detail feature available here
https://quickadminpanel.com/
https://github.com/LaravelDaily/quickadmin
http://docs.quickadminpanel.com/Download_and_Install_Your_Panel/General_Instructions.html
Vue.js+Laravel version of generator: Vue.QuickAdminPanel.com
Here a good article we can read for Laravel Admin
13 Laravel Admin Panel Generators
https://laravel-news.com/13-laravel-admin-panel-generators

Technologies Every Web Architect/Developer/Engineer Should Know

Client side technologies

Front-end technologies

–Browsers

–HTML5

–CSS3

–CSS3/LESS/SASS

Programming Languages – JS

–JavaScript/TypeScript/CoffeeScript

Front-end Libraries – JS

–jQuery/jQueryUI/UnderscoreJS/RequireJS

–C3.js/D3.js

Front-end frameworks – JS

–AngularJS/ReactJS/EmberJS/BackboneJS/VueJS

–Phonegap/Cordova/Ionic

CSS Frameworks

–Bootstrap

–Foundation

Server side technologies

Back-end technologies

–Apache web server

–Nginx

–NodeJS

–Lighthttpd

Databases

–PostgreSQL/MySQL/MariaDB/SQLite

NoSQL

–MongoDB/CouchDB/Redis/Memcached

Programming Languages

–Python/PHP/JAVA/Ruby/Go/Erlang/Elixir

Back-end frameworks

–Django/Laravel/CodeIgniter/Symfony/Zend

Cloud

–AWS/Azure/GCP

————————————————————–

IDEs:

–Netbeans

–eclipse

–Notepad++

Tools:

–composer

–bower

–gulp

–django – orm/querysets

–django – admin/manage

–laravel elixir/mix

–laravel artisan

–laravel – eloquent

–laravel – blade

–SQLAlchemy

–Celery

–ORM

–templating

 

HTML5/HTML

HTML 5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard, and subsumes XHTML

CSS3/CSS

CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3

https://developer.mozilla.org/en-US/docs/Web/CSS

LESS– a CSS pre-compiler to make working with CSS easier and add functionality

Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official documentation for Less, the language and Less.js, the JavaScript tool that converts your Less styles to CSS styles.
SASS– a CSS pre-compiler to make working with CSS easier and add functionality [CSS with superpowers]

Sass is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum. After its initial versions, Weizenbaum and Chris Eppstein have continued to extend Sass with SassScript, a simple scripting language used in Sass files.

Programming Languages

Javascript– used by all web browsers, and lots of other frameworks.

JavaScript, often abbreviated as JS, is a high-level, interpreted programming language. It is a language which is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm. Alongside HTML and CSS, JavaScript is one of the three core technologies of the World Wide Web.

Coffeescript– is a kind of “dialect” of javascript. It is viewed as simpler and easier on your eyes as a developer but it complies (converts) back into javascript

Typescript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language. TypeScript is designed for development of large applications and transcompiles to JavaScript.

PHP– PHP: Hypertext Preprocessor is a server-side scripting language designed for Web development, but also used as a general-purpose programming language.

Python– Python is an interpreted high-level programming language for general-purpose programming and used by the Django framework and used in a lot of mathematical calculations.

Erlang– is a general-purpose, concurrent, functional programming language, as well as a garbage-collected runtime system.

JS Libraries:

jQuery

http://jquery.com/

jQueryUI

https://jqueryui.com/

Underscore

https://underscorejs.org/

Require

https://requirejs.org/

JS Frameworks:

Bootstrap– a UI (user interface) framework for building with HTML/CSS/Javascript

Angular.js– a front-end javascript framework.

React.js– A JavaScript library for building user interfaces

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Ember.js– a front-end javascript framework.

Backbone.js– a front-end javascript framework.

Phonegap / Cordova– a mobile framework that exposes native api’s of iOS and Android for use when writing javascript

Ionic– a mobile framework similar to phonegap/cordova

Foundation– a UI framework for building with HTML/CSS/Javascript

Meteor– a full-stack (front and back end) javascript framework

https://docs.meteor.com/

Vue.js

Vue.js is a JavaScript web application framework for building rich apps that run in web browsers.

Backend PHP/Python Frameworks:

Laravel is a free, open-source PHP web framework and intended for the development of web applications following the model–view–controller (MVC) architectural pattern and based on Symfony.

https://laravel.com/

Symfony is a set of reusable PHP components and a PHP framework to build web applications, APIs, microservices and web services.

https://symfony.com/

CodeIgniter is a powerful PHP framework with a very small footprint, built for developers who need a simple and elegant toolkit to create full-featured web applications.

https://www.codeigniter.com/

Django– a full-stack framework built using python

Django makes it easier to build better Web apps more quickly and with less code. Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.

Node.js– a server-side javascript framework

https://nodejs.org/en/

Databases:

MongoDB–is a free and open-source cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with schemata.

Redis– is the most popular key-value store. It is lighting fast for retrieving data but doesn’t allow for much depth in the data storage.

Redis, RE-dis is an open-source in-memory data structure project implementing a distributed, in-memory key-value database with optional durability. Redis supports different kinds of abstract data structures, such as strings, lists, maps, sets, sorted sets, hyperloglogs, bitmaps and spatial indexes.

Memcachedis a general-purpose distributed memory caching system. It is often used to speed up dynamic database-driven websites by caching data and objects in RAM to reduce the number of times an external data source must be read.

PostgreSQL– is a popular open-sourced SQL database.

MySQL– is another popular open-sourced SQL database. MySQL is used in WordPress websites.

MariaDB-is a community-developed fork of the MySQL relational database management system.

Tools:

Bower: A package manager for the web

https://bower.io/

Composer : Dependency Manager for PHP

Composer is an application-level package manager for the PHP programming language that provides a standard format for managing dependencies of PHP software and required libraries.

https://getcomposer.org/

gulp is an open-source JavaScript toolkit by Fractal Innovations and the open source community at GitHub, used as a streaming build system in front-end web development.

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

https://gulpjs.com/

Data formats

JSON– is quickly becoming the most popular data format

XML– was the main data format early in the web days and predominantly used by Microsoft systems

CSV– is data formatted by commas. Excel data is typically formatted this way.

Others:

REST– is a protocol mainly used for API’s. It has standard methods like GET, POST, and PUT that let information be exchanged between applications.

Object-Relational Mapper (ORM)

Laravel ORM – Eloquent

https://laravel.com/docs/5.7/eloquent

Django Object-Relational Mapper (ORM)

https://www.fullstackpython.com/django-orm.html

SQLAlchemy

SQLAlchemy (source code) is a well-regarded database toolkit and object-relational mapper (ORM) implementation written in Python. SQLAlchemy provides a generalized interface for creating and executing database-agnostic code without needing to write SQL statements.

Task queues : Distributed Task Queue

Task Worker

Celery

Celery is a task queue implementation for Python web applications used to asynchronously execute work outside the HTTP request-response cycle.

Celery: Distributed Task Queue

Celery is an asynchronous task queue/job queue based on distributed message passing. It is focused on real-time operation, but supports scheduling as well.

The execution units, called tasks, are executed concurrently on a single or more worker servers using multiprocessing, Eventlet, or gevent. Tasks can execute asynchronously (in the background) or synchronously (wait until ready).

Celery is used in production systems to process millions of tasks a day.

Redis Queue (RQ)

Redis Queue (RQ) is a Python task queue implementation that uses Redis to keep track of tasks in the queue that need to be executed.

Task Scheduler

Celery Beat

http://docs.celeryproject.org/en/latest/userguide/periodic-tasks.html

celery beat is a scheduler; It kicks off tasks at regular intervals, that are then executed by available worker nodes in the cluster. By default the entries are taken from the beat_schedule setting, but custom stores can also be used, like storing the entries in a SQL database.

Task Monitoring

Flower – Celery monitoring tool

https://flower.readthedocs.io/en/latest/

Real-time monitoring using Celery Events. Task progress and history; Ability to show task details (arguments, start time, runtime, and more); Graphs and statistics.

Celery Flower

The Celery Flower is a tool for monitoring your celery tasks and workers. It’s web based and allows you to see task progress, details, worker status.

Templating Engine:

Blade Templating. Blade is a simple, yet powerful templating engine provided with Laravel. Unlike controller layouts, Blade is driven by template inheritance and sections. All Blade templates should use the .blade.php extension.

Blade is the simple, yet powerful templating engine provided with Laravel. Unlike other popular PHP templating engines, Blade does not restrict you from using plain PHP code in your views. In fact, all Blade views are compiled into plain PHP code and cached until they are modified, meaning Blade adds essentially zero overhead to your application. 

https://laravel.com/docs/5.7/blade

https://laravel.com/docs/5.0/templates

Bootstrap Responsive Admin Templates – Material Admin

https://wrapbootstrap.com/theme/material-admin-responsive-admin-theme-WB011H985

Pure CSS and DIV based Contact Us form design

Pure CSS and DIV based Contact Us form design

Here is how you can design Pure CSS and DIV based Contact Us form design.

I have used simple design, it is not much complited to understand.

Here is how it look like:
1.)FF

FF – Pure CSS and DIV based Contact Us form design

2.)Chrome

Chrome – Pure CSS and DIV based Contact Us form design

3.) IE

IE – Pure CSS and DIV based Contact Us form design

Full HTML with CSS source code:
Modify border and colors as you like.

<!DOCTYPE html>
<html>
    <head>
        <title>Contact Us</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
			body{
				font-family:Verdana, Arial, Helvetica, sans-serif;
				font-size:14px;
			}
			p, h1, form, button{border:0; margin:0; padding:0;}
			.spacer{clear:both; height:1px;}

			/* ----------- My Form ----------- */
			.myform{
				margin:0 auto;
				width:509px;
				padding:14px;
			}

			/* ----------- form-wrapper ----------- */
			#form-wrapper{
				background: none repeat scroll 0 0 #C6C6C6;
				border: 2px solid #8B8B8B;
				border-radius: 10px;
				-moz-border-radius: 10px;
				-op-border-radius: 10px;
				-webkit-border-radius: 10px;
			}
			#form-wrapper h1 {
				font-weight:bold;
				margin-bottom:8px;
			}
			#form-wrapper p{
				font-size:11px;
				color:#666666;
				margin-bottom:20px;
				border-bottom:solid 1px #7E7E7E;
				padding-bottom:10px;
			}
			#form-wrapper label{
				display:block;
				font-weight:bold;
				text-align:right;
				width:193px;
				float:left;
			}
			#form-wrapper .small{
				color:#666666;
				display:block;
				font-size:11px;
				font-weight:normal;
				text-align:right;
				width:193px;
			}
			#form-wrapper input,#form-wrapper textarea{
				float:left;
				border:solid 1px #aacfe4;
				width:284px;
				margin:2px 0 20px 10px;
				border-radius: 15px;
				-moz-border-radius: 15px;
				-op-border-radius: 15px;
				-webkit-border-radius: 15px;
				font-size: 14px;
			}

			#form-wrapper input{
				height: 25px;
				padding: 4px 10px;
			}
			#form-wrapper textarea{
				padding: 10px 10px;
				overflow: auto;
			}
			/* ----------- Form Button ----------- */
			#form-wrapper button {
			   background: #2c3e4a;
			   background: -webkit-gradient(linear, left top, left bottom, from(#919496), to(#2c3e4a));
			   background: -webkit-linear-gradient(top, #919496, #2c3e4a);
			   background: -moz-linear-gradient(top, #919496, #2c3e4a);
			   background: -ms-linear-gradient(top, #919496, #2c3e4a);
			   background: -o-linear-gradient(top, #919496, #2c3e4a);
			   padding: 5px 10px;
			   -webkit-border-radius: 15px;
			   -moz-border-radius: 15px;
			   border-radius: 15px;
			   margin-left: 315px;
			   color: white;
			   font-size: 20px;
			   text-decoration: none;
			   vertical-align: middle;
			}
			#form-wrapper button:hover {
			   background: #3d4b54;
			   color: #ccc;
			}
        </style>
    </head>
    <body>
        <div id="form-wrapper" class="myform">
            <form id="form" name="form" method="post" action="index.html">

                <h1>Contact Us</h1>
                <p>Please complete the form bellow.</p>

                <label for="name">Name
                    <span class="small">Add your name</span>
                </label>
                <input type="text" name="name" placeholder="Mahesh Prasad" id="name" />

                <label for="email">Email
                    <span class="small">Add a valid address</span>
                </label>
                <input type="text" name="email" placeholder="mail@example.com" id="email" />

                <label for="phone">Phone
                    <span class="small">Add valid 10 digit your mobile no.</span>
                </label>
                <input type="text" name="phone" placeholder="8888888888" id="phone" />

                <label for="web">Web-site
                    <span class="small">Add your web-site url</span>
                </label>
                <input id="web" type="text" placeholder="http://www.example.com" name="web" id="web">

                <label for="message">Message
                    <span class="small">Write something to us</span>
                </label>
                <textarea placeholder="Write something to us" name="message" id="message"  rows="5"></textarea>

                <button type="submit">Send</button>
                <div class="spacer"></div>

            </form>
        </div>
    </body>
</html>