CIGen&twbs3

My Codeigniter Scaffolding with twitter bootstrap 3

The Start

Yesterday I was thinking about creating the phpadmin like crud interface for my database tables. About two years ago I found that nice little scaffolding plugin called spark plug on google code. Via the url it allows you to very easily create a basic skeleton of your codeigniter php application.

Codeigniter 3.4/4.x

In October 2014 (blog post), the B.C. Institute of Technology took the lead of the Codeigniter project. The current development is on version 4 of Codeigniter. (Current Stable is Version 3.1) Codeigniter will be compatible with PHP 7. It will use composer dependency managment and is covered with tests, when it will be relased in a stable version. A drawback is that the php intl (~native php language support, intl makes life so easy with multilanguage) module for php needs to be installed and activated, otherwise Codeigniter won’t run. Codeigniter used to be (like joomla from stucture) running on cheap, very simple and basic hosting. In addition the index.php FrontController has been moved to the public directory. Still, before, Codigniter just would run out of the box. The advantages of intl, tests and composer are so enormous that decisions that were made are understandable and anyting else is a philosophical question.

Other php Frameworks with Skeleton generation

Symfony might be the rolls royce use generators via CLI to scaffold almost everything and start coding straight forward php. No fallback to phpmyadmin database manners. Symfony or Laravel also might got a overhead of functionality, even if they have bundles that can be used optionally. Codeigniter is known as a very small footprint php mvc. its about 1.4MB of size. When being a newbie CI’s more than just heaven. So Ci is really rapid php development with the use of it’s good libraries and it’s ActiveRecord (Still ORM like Propel can be added as a self built and added library).

The Motivation

The reason why I changed the source of sparkplug is because twitter bootstrap is really the quasi standard in frontend creation these days. As I always got the idea of pushing it a little bit. I also made it clean and ready for use the way I need it anyway with:

  • Twitter Bootstrap (buttons, tables, alerts)
  • serverside validation preset
  • html5 Markup
  • clientside validation preset
  • CI pagination for the list view
  • xss cleanup

So theres still a bit of additional repetitive work to perform, but still again some time saved:-)

Usage

If you call the url to your sparkplug controller with the method scaffold and the param {tablename} it will generate the whole crud for just one table. While rewriting the sparkplug controller to a fully working new table controller.

MEANS: You create one tables’ crud, rename the controller, paste in the new sparkplug controller, and run again for the next table. just to prevent conflicts:)…then on production site, make shure to remove the spark plug scaffolding.

One table fits all at the moment.
Manual rename of the ci controllers is still required.
This is no different to the original spark plug…
@TODO create startpage with list of all tables…

You’ll find the source of the codeigniter scaffolding library at:

Sparkplug twbs3 on github

My Codeigniter Scaffolding with twitter bootstrap 3 isn’t a fork. But like usual in codeigniter to push creators, it comes with a fully working installation of codeingiter with minimum configuration.

the non fork of ci sunrise please don’t get angry at me hopefully, just don’t like forking yet.

service!

Javascript QUnit test

Javascript QUnit test

The following small article is about the JQuery plug-in “jquery.backtotop.my”. This JQuery Plugin I created and tested in the year 2014. The Project is the result from three days working with the Grunt NodeJS Taskrunner.

Note

The plugin needs a redesign. However, the priorities are currently somewhere else. With today’s knowledge the tests would probably get better.

Screenshot



I installed a demo site on keepitnative.ch, where the plugin can be tested on mobile.

Idea

The JS to be tested is to be as simple as possible for a first experience with Javascript Unit Testing, in order to be able to concentrate well on JS Unit Testing.

Intro

The functionality of the plugin is quite simple. The php.net website, for example, uses a «Back to Top» button. When the user clicks on the «Back to Top» icon, instead of immediately jumping to the content. The Website smoothly jumps with a little speed and with an ease-out effect to the beginning of the web page. Scrolled until the target, an HTML anchor, is reached. I have the ease-out effect at the end of the scrolling, was omitted from my version, because then JQuery Ui or the JQuery Easing plugin would be required. That would be a little too much of the good. But we will see. The plugin can be tested with QUnit per Grunt command. The CSS styles can be changed and easily compiled with Grunt by LESS in CSS.

Requirements

  • A scroll button with “Glyphicons” icons
  • Button with FadeIn and FadeOut, if the web page text is above the screen height, the button is displayed.
  • After pressing the button, a linear scroll follows the position of the target HTML anchor.
    Tools

Tools

  • Grunt und NodeJS
  • NPM JQuery Init Scaffolding
  • Twitter Bootstrap 3
  • QUnit
  • JSHint
  • lessc
  • concat
  • Copy für Iconfonts dist

Books

You can view the program source on JQuery Backtotop.

The Article «Javascript QUnit test», is not an experience report, nor a tutorial on QUnit. The article is intended as an exercise retrospective.