Implementing dynamic drop down / dependent list in laravel4

Standard

drop-down-menuWhen I used procedural PHP for most of my projects, I found myself needing what I referred to as a dependent list. These days I hear it being referred to as dynamic drop down more often. After looking around, a friend gave this solution to me.

All examples here will rely on the DDL database schema here:

For a clearer view, I have it here on SQL fiddle: http://sqlfiddle.com/#!2/58fcf/4/1

Procedural code

The mark-up is a file named with the php extension with the body content as above. It uses the following jQuery snippet

From the jQuery code above we try to send the present value of the category to a different PHP file that takes in GET parameters. It gets all the subcategories of the selected category and echo them to that page making it return those listed values to jQuery as sub categories

Good solution right? Thanks to my friend but now I’m dealing with more advanced code.

By using laravel, we mostly use request URIs rather than $_GET requests. I could re-implement this by creating a seperate route that takes that extra request segment to fetch all the information.

I’ll go through 3 ways we can achieve this in Laravel, starting with this.

Method 1

Create your route to display your drop down list

Define the firstmethod in the myController (these names can be whatever you wish) controller.

Next we’ll create a route for our sub-categories feeder view

and a method

for the view of this method we will add the following

Inside our first display view, we can add the following mark-up:

and finally the JS part

So this is really similar to the former procedural version but I took away all the unnecessary loader part.

Method 2

For this method, I already made a JSfiddle to implement with static HTML. This method is meant to use JSON data to feed DB contents to jQuery in order to dynamically change subcategories based on the selected categories.

Notice I put values of data-load in single quotes because it is expected to contain JSON data which has double quotes. To make our data more dynamic, let’s make the data-load JSON get fetched from the database. Let’s make a controller with this contents

Here’s the part where we plug that into our view:

And with this we can get it to work like it did with the static HTML example above.

Method 3

In this method, I will simplify Maksim Surguy’s solution from this github gist. Mak used two tables (makers and models) to describe car makers and models. Rather than twisting the flow, I’ll keep to my categories and subcategories tables.

Categories == Makers

Subcategories == Models

In order to use Eloquent with this. We will extend eloquent with a models for each of them.

categories.php (One to Many Eloquent Method)

subcategories.php (Inverse Relation Eloquent)

Then a simple route with a callback function

The JS part

and the whew! The HTML

I made some modifications to Mak’s code and I believe it works better this way. Also, the Eloquent method are adjusted to fit the Laravel4.2 documentation. I hope this helps

My Front-end development pattern

Standard

Web-Developer

I’ve seen different front-end developers start their projects. In most cases for intermediate designers, first steps are to write the basic HTML, download bootstrap or foundation framework for local use, download an icon-font set like fontawesome, and they start writing their mark-up to fit the styles defined by the framework.

You speak of user experience? You’ve killed it even before starting your project at all. If you fall in that category I described above. Then you need a change henceforth if you are not allergic to advancements.

I think those frameworks are good but it shouldn’t be your steps for every single project you do. That’s just lame!

I’m probably not doing it the best way it may be done but I have a conviction that I’m doing it right.

Sometimes I wait for inspirations for a whole week before I begin a front-end design. Thanks to sites like

They really help me defeat the process of seeking inspiration for so long. When I have an idea of what I want already, I just sketch it out on a paper and keep in my diary  throughout that design.

After this, I wear my developer suits :D and open sublime text editor, starting with a code as little as this

html:5

Little but powerful. With Emmet, that produces the following HTML5 document for me:

 

really cool right! Emmet helps a long way more. You should check it out.

One thing emmet does in that start HTML:5 document I don’t like is the upper case UTF-8 in the meta tag. Not like there’s anything wrong with this but it’s just one of the things that makes me feel uncomfortable. I prefer it in lower case.

I add my viewport meta tag

 

I download modernizr or just pick a local copy I already have and add it to my vendor sub folder inside my js folder. At this point I have a file structure in this form

frontend_matters (1)

The HTML5 boilerplate is not so spoken of like it was at 2011 but it’s still very much useful. I start up my project by including it and it’s awesome the way I have a prepared 404.html page, I include modernizr in the head. I add up Google CDN jQuery with a local fallback, and a favicon.png file to my root directory. My HTML structure then becomes:

I added a google font to that because most times I do the google fonts since I can’t afford other webfonts. I also converted boilerplate’s stylesheet to a partial (_h5bp.sass) and imported it in my styles.sass file.

Now the HTML is set up. The JS is fine as well. My main.js is where I write my javascript and plugins.js by HTML5 boilerplate has a nice fallback for browsers without console and also gives me space to initialize my third-party plugins.

I just gave an example of flexslider being used in my project to show usage of plugins.

I’ll say my whole javascript is fine but pagespeed really matters to me and this makes me take minification very seriously. I minify my js with grunt uglify after installing it with npm.

After this step, all that needs to be done is to register the task in Gruntfile.js

I had created a package.json file from the start of the project with npm init. Now everything seems fine with JS. I’ll just have to change main.js to main.min.js at the end of my design.

The CSS

I write sass (indented) pre-processor. For those that agree with my steps from the beginning and got here to say :

B.S! He uses indented sass

I feel comfortable with indented sass maybe because I’m a python developer and I live by indenting :P. I’ve been thinking I’ll change to Scss format soon enough. I really leverage Sass by using compass. Consider all you want just getting done so easily.

First, I make use of compass extensions, they help and provide me with a lot of useful mixins in addition with the ones I created myself. Here are some of mine

I also use breakpoints for my responsive styling.

with it you can write media queries like this

which is an equivalent of the following CSS

The force is with me on this one.

When there is need for grids, I call for susy. Susy is way better than bootstrap grids in that I don’t have to load some unnecessary classes I don’t need. I call for grids just when I need them this way

with a mark-up of this sort

That’s just 4 grids but we can go 12 just like bootstrap too.

Finally, I will like my web applications to be device agnostic and that includes browser compatibility. Autoprefixer comes to my rescue at this point. I just need to add it to require it in my config.rb with my breakpoints and susy. But I also have to do some things to make it work after CSS file is generated, since it is a post processor.

I also set output_style to compressed in my config.rb to get a resulting minified CSS. Finally, I put a snippet of google analytics at the bottom of my HTML page as suggested by h5bp.

Now I’m all set. I don’t have to do all this every time I start a new project as I’ve made a default directory where I have it all set up. In cases where I have to use bootstrap, I also have a default-bootstrap directory where bootstrap is included in my config.rb.

These are good practices and I really do hope it helps anyone that stumbles upon them.

There shall be binaries

Standard

screenshot5

There comes a point when your program needs to be distributed to other users. You don’t want to always have to give every intended user of your program a list of modules or libraries to be installed before they can use your software.

I’ve found myself developing software with python a lot lately and usually, I like people to check them out. Most times, my target users are Windows OS users. I built my programs but packing them into binaries became the pain in the neck for me.

Thanks to sherafff on the IRC. He got my first required binary done for me from his windows development machine. I’m no windows user and yet I have to be on the operating system for the target binary while I bundle it. This is no big deal! I have a windows VM.

After sherafff made the first binary for me, I found there were still a lot of program bugs that I had to fix. After fixing this in the source, I needed my binary to be updated again but then I wasn’t seeing sherafff active. He was on like most IRC users but was always away.

Taking my decision on what binary builder to use

I’d always thought of py2exe but it seemed like too much headache for me as a starter. Sherafff had used PyInstaller and said it was cool so I tried reading the docs carefully and I was able to make use of it. My preferred way of running pyinstaller on windows is

  • –icon because I like specifying my icon because I don’t like the default icon for generated executables
  • –noconsole because I don’t need a debugger console being displayed to a human end user
  • –onefile to get my single file rather than folders with a lot of DLLs (Dynamic Link Libraries)
  • –upx-dir just to specify where I’ve downloaded UPX to.

Upx helps with compression while the executable is being packed. Pyinstaller integrates finely with upx and that is cool to me. I know py2exe has limitations even as I’ve not explored it well enough (I should soon). There are other builders that can be used to build my binaries which I also hope to explore soon and they are:

  • py2app
  • cx_Freeze
  • bbFreeze
  • vendorID

While I was being lazy to read the docs and get started with pyinstaller, I also got a heads up on a graphical builder which I think is cool. I haven’t used it yet but I hope to put it to use in my next project. It is gui2exe which was built with wxpython.

I’ve only scratched the surface of C programming but I believe in such a compiled language as C, we don’t have to create executable for Linux as that is what is done after compiling. 0xFEEDBAC had always felt python will ruin me but I love it anyway :D. He said run while you can :) . Yea after a few more python experiments, I think I will be building most of my desktop applications in C and just make stick to web applications and simple programs with Python.