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>

jQuery Multi Level Popup Menu

Description: Enhance arbitrary links on your page with some multi level powers with jQuery Multi Level Popup Menu! It lets you associate a multi level drop down menu to any link on the page, so moving the mouse over the link activates the menu to be shown beside it. Each pop up menu is simply defined as a regular nested UL on the page, making it very intuitive to set up, not to mention the menus search engine friendly! Lets run down the script’s features:

• Lets you extend any link on the page with a multi level pop up menu, by inserting the custom attribute data-popupmenu inside the link.
• Each pop up menu is simply defined as a regular, hidden nested UL on the page.
• Sub Menus repositions themselves when too close to the right or bottom edges of the browser window so they remain in view.
• Ability to customize the expand animation speed.
• Ability to specify the delay before each menu and its sub menus appear/ disappear when the mouse rolls over and out of them.

When it comes to menus, popping up is a good thing!

Dynamic Drive

Webmaster Resources

Read full entry here»

http://www.dynamicdrive.com/dynamicindex1/popupmenu.htm

12 Excellent jQuery Plugins for Enhancing Forms

Forms are part of almost every website. Whether it’s a simple contact form or a complex sign-up form, filling one out is usually a mundane task. When possible, you should try to make form completion for the user easier and more enjoyable. Here are 12 jQuery plugins that can help you enhance your forms.

Read full entry here»

http://webdesignledger.com/resources/12-excellent-jquery-plugins-for-enhancing-forms

Mastering CSS Coding: Getting Started

CSS has become the standard for building websites in today’s industry. Whether you are a hardcore developer or designer, you should be familiar with it. CSS is the bridge between programming and design, and any Web professional must have some general knowledge of it. If you are getting your feet wet with CSS, this is the perfect time to fire up your favorite text editor and follow along in this tutorial as we cover the most common and practical uses of CSS.

Overview: What We Will Cover Today

We’ll start with what you could call the fundamental properties and capabilities of CSS, ones that we commonly use to build CSS-based websites:

1. Padding vs. margin
2. Floats
3. Center alignment
4. Ordered vs. unordered lists
5. Styling headings
6. Overflow
7. Position

Once you are comfortable with the basics, we will kick it up a notch with some neat tricks to build your CSS website from scratch and make some enhancements to it.

1. Background images
2. Image enhancement
3. PSD to XHTML

Read full entry here»

http://www.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/

Object-Oriented CSS: What, How, and Why

What is Object-Oriented CSS?

Object-oriented CSS, at its core, is simply writing cleaner, DRYer CSS. It’s not a different language: still the same old CSS we all know and love. It’s just a paradigm shift. Really, object-oriented CSS is a few simple patterns and best practices.

So why call it object-oriented? Well, according to Wikipedia,

Object-oriented programming (OOP) is a programming paradigm that uses “objects” — data structures consisting of datafields and methods — and their interactions to design applications and computer programs.

If we were to re-write that definition for object-oriented CSS, it might say something like this:

Object-oriented CSS is a coding paradigm that styles “objects” or “modules”—nestable chunks of HTML that define a section of a webpage—with robust, reusable styles.

This basically means that you have a standard “object” (an HTML structure). Then, you have CSS classes that you apply to objects, which define the design and flow of the object.

Confused? Let’s look a bit of theory.

Read full entry here»

http://net.tutsplus.com/tutorials/html-css-techniques/object-oriented-css-what-how-and-why/

Create CSS Based Beautiful Sitemaps with SlickMap CSS

SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

The general idea of SlickMap CSS is to streamline the web design process by automating the illustration of sitemaps while at the same time allowing for the predevelopment of functional HTML navigation.

• Eliminates the need for additional software
• Easily revised with clients on-the-fly
• Clickable anchors with visible URLs
• Design process results in working HTML code

Website: http://astuteo.com/slickmap/

Demo: http://astuteo.com/slickmap/demo/