Homestead.Yaml Explained A to Z

2 Comments
Homestead.Yaml explained

The Mountain in background is “K2”, the second tallest mountain on earth.

 

Laravel Homestead has changed the way we code and ship our software. A lot of basic configuration is done in Homestead.yaml but Laravel’s official documentation say very less about it. Few blocks of yaml is explained. Which makes it hard to understand the rest of the file especially for the starters. With time, one can understand the whole homestead.yaml but this post will help you time jump and learn it quickly. Before we start exploring homestead.yaml, I will like to start with an overview of “YAML” itself and creation of homestead.yaml file. Jump to the 3rd heading if you want to skip these two.

YAML

YAML first stood for “Yes Another Markup Language” and now it stands for “YAML Ain’t Markup Language” . It can be called as markdown version of JSON. The benefit of it is that it is cross-language compatible but is human readable as well. It has three man data type:

  • Mapping (hashes / dictionaries / Key,Value)
  • Sequences (arrays / lists)
  • Scalars (Strings & Numbers)

The names in the brackets represents there most probable equivalents in other languages. I will explain these terminologies on the way down with homestead.yaml

Generating Homestead.yaml

When you git clone the homestead or download it from the official directory.  Then open the command line tool and navigate to the directory where you have downloaded homestead. Now run

bash init.sh

It will create homestead.yaml file in the root of user directory. On windows, its located at C:/Users/YourUserName/.homestead. Remeber that homestead box from vagrant and homestead on git hub are two seperate things. Follow this article for more details.

Part 1: Configuration for the Virtual Server

Configuring the Virtual Server

Configuring the Virtual Server

First part of the homestead.yaml deals with the configuration of your virtual server. Like its IP address, its RAM, CPUs and the Virtual Environment provider. Each of the above element is a scalar in YAML (variable is the equivalent name in programming). These scalars contains strings (e.g virtaulbox) or numbers (e.g 2048) . Each of the item is explained below:

IP

This will be the IP address of your virtual server. The IP range of  “192.168” is used for internal communication by variety of devices e.g routers and computers on intranet. Homestead.yaml comes pre-configured with 192.168.10.10. After running the Virtual Machine (VM), you will be able to access the it by going to http://192.168.10.10 . If you change it to some other IP let’s say 192.168.50.10 then your virtual machine will be accessible through that IP. You will have to do “Vagrant reload” for the new IP to take its effect.
My advice will be to leave this IP as is and don’t change it unless required. The reason is that so many online tutorials for configuring host and connecting to other posts use this default IP of homestead.yaml. So it will help you apply other’s tutorials conveniently.

Memory:

As basic purpose of Homestead is to streamline the development and production environment. It makes sense to fine tune the resources of your virtual machine to match that of the development environment. Memory will help you control RAM of the virtual machine. The value given by default is in MBs which is 2048 MB or 2 GB. Your hardware will be the limiting factor because a machine having 2 GB of memory cannot provide more than 2 GB to VM.

CPUS: 

As its obvious from its name, it controls the number of cpus which your VM will be using. Most of us will be limited to “1” number unless you need to have multiple cpus on your system. Control on number of cores would have been better as most of cpus have multiple cores.

Provider:

It is the last item in this part. It specify the software which we will be using for virtualization. Currently Homestead documentation states VMWare and VirtualBox to be supported providers for virtualization. There is a way to use Windows’ Hyper-V as well. Homestead.yaml is set to use VirtualBox and you don’t need to edit it unless you are using VMWare.

Part 2: SSH in Homestead.YAML

Path to the SSH keys

Path to the SSH keys

This is the part which creates problem for beginners when they are done installing all the software for Homestead. Official documentation don’t reveal anything about adding ssh keys. In homestead.YAML, you will find above paths by default which corresponds to a directory at root of user. E.g on windows its located at “C:\Users\YourUserName\.ssh”. .ssh is a hidden folder and you will need to create it through ssh key generators like puttygen, ssh-gen etc. I have covered this part here “Installing Homestead on Windows“.

Now to understand this segment, we need to dive into the SSH and understand it a bit. SSH is a secure protocol to allow administrators to access and manage virtual servers. As Homestead helps us create a virtual server on top of our machine, so we will need to use ssh to access it. There are many other ways to do this but ssh is the most secure. Furthermore, its been used on the production server almost always. So using ssh on a virtual server makes sense with the streamlining motive of homestead.

Parts of SSH:

Homestead uses Key-Based SSH. Which means there are two keys. One is Public Key, while the other is  Private Key.  Public key is stored on the virtual machine and is used to authorize access to those with private keys. It ends with an extension “.pub” which means public (shown in point number 5 above).  The private key is like a password. You will need this key to authenticate to the virtual server. The virtual server will then compare the public and private key and it will let you connect if the keys are right. Point number 6 holds the private key path.

Configuration of  SSH keys for Homestead.yaml

For homestead, you just need to place the above 2 keys in  the paths provided in homestead.yaml. Of course you can change the location of keys in Homestead.yaml as well. Be sure to use the exact path. Using the root path will help avoid many errors and problems. Tools like puttygen and ssh-gen will automatically place the authorization key (5) and the private key (6) in the default location of homestead.yaml . If error arises in connectivity, then make sure that the keys exists in specified path. To connect to the VM through ssh, simply run “vagrant ssh” in command line tool.

Part 3: Shared Folders and Sites

homestead-yaml-configuring-shared-folders-and-sites

I think this is the most edited part of homestead.yaml. First off all, let’s explain it in YAML terminology. The folders: and the sites: are mappers. The -map represents sequences (  having a dash “-”  at the start). Mappers hold a block of data and in this case they are holding sequences. Now let’s explain it in terms of homestead.

Folders:

Under the folders, you can configure the folders which will be shared between your Guest OS and Host OS. It has two parts. The “map” holds the path to the folder on your Host OS. Host Os is the operating system on which you have installed homestead. Either a Windows or a Mac. By default, homestead.yaml points to “~/Code” which is a folder located in your user folder.

The exact path to that folder is “C:\Users\YourUserName\Code” on windows. The “YourUserName” part means your username on your computer. If you want to change the shared folder on you Host Os to some other folder, just edit the map above. And set it to a new folder by using absolute path. Like if you move it to a folder named “Project” in a “D” partition, then the absolute path will be “D://Project”. YAML is case sensitive so pay attention to the case as well as the spellings.

The “to” has a value set to the path of folder on Guest OS. In this case, Guest OS is Ubuntu. What this means is that anything you add/edit to “Code” folder on your Host OS will be added to the “/home/vagrant/Code” folder on your Guest OS and vice versa. The benefit is that as your Code folder will be accessible to your Guest OS. So you can easily edit the projects in that folder on your Host OS like by using phpstrom but they will be available to Guest OS. They will run in an isolated environment when executed. So we can put it like this:

  • -map: Path to the folder on your Host OS where you want to place shared code e.g Laravel
  •       to: Path to the folder on your Guest OS which will share the files with the above mentioned folder.

You can add multiple shared folders to homestead.yaml. The method is the same as adding sites as shown below.

Sites:

The sites helps you name your individual projects so that you can access them through a pseudo domain like homestead.app instead of localhost/laravel. It sets the configuration for nginx. The “map” tells the nginx to listen for that pseudo domain. And the “to” tells the nginx where to look for files on recival of a request through that pseudo domain. In the above screenshot of homestead.yaml we have default settings for one site. It’s psuedo domain name is homestead.app. And the default “to” is set to “/home/vagrant/Code/Laravel/public”. The later one is the path to a sub folder in your shared folder “Code”. It is created when you install laravel in the Code directory through composer.

Now when the VM is up and you open your browser, going to homestead.app will give you a default laravel page. If you don’t have Laravel then you will get a “File Not Found” error. It happens after first time installation.

Another thing which you can do with the sites is that you can add more sites. Example is as follow.

sites:
    - map: laravel.app
      to: /home/vagrant/Code/Laravel/public
    - map: open.app
      to: /home/vagrant/Code/opensource
    - map: client.project
      to: /home/vagrant/Code/projects

You can see that I have added three sites to the homestead.yaml file. So by specifying a map and a path for that map, you can add as many sites as you want. And you can open them with your custom pseudo domain name in your browser. But there is one other step you need to do for this to take effect, changing the Host file.

Host:

The host file will redirect the requests for your pseudo domains (homestead.app, open.app, client.project) to the IP that you will specify. Remember the first part? Where we sat an IP for the Virtual Machine. Now we need to set that IP for the above Pseudo Domains in the Host File of Host OS. On Mac and Linux, this file is located at /etc/hosts. On Windows, it is located at C:\Windows\System32\drivers\etc\hosts. Edit this file in a text editor and add the following lines to it.

#if you are using the default pseudo name in the map
192.168.10.10 homestead.app

#add one for each pseudo domain you add
192.168.10.10  open.app
192.168.10.10  project.app

If you have changed your IP in the first section, then use that new IP here. For every pseudo domain, you will have to add an entry like above in the Host file. The whole story of Host and Sites map can be summarized by concluding that the Host File tells your Computer where to look for the pseudo names you have provided. While the “sites” map in homestead.yaml file tells the nginx to look for in these folder for these pseudo domains.

Remember that after adding sites to homestead.yaml, you will have to re-provision the Vagrant. Type “vagrant reload —provision” and press enter in command line.

Part 4: Databases and Ports

For most of the part, you will never need to edit the database map. It contains the name of the default database. Once the vagrant is up, you can add as many databases as you want. You can add them through command line or by installing phpmyadmin. The ports map is for exposing more ports if you need to add any.  You can specify multiple lists of ports. Each list starts with “-“. The “send” holds the port number. The “to” holds the internal port number where the VM should forward the requests. And Simply the “protocol” specifies the type of protocol you will allow or use on that port.

Points to Remember

The following points are worth remembering as they will help you avoid errors with homestead.yaml or fix them quickly.

  1. “Input file not found” means that your path is not properly configured and nginx can not find the folder.
  2.  After adding site or making other changes, run “Vagrant reload –provision” in command line
  3.  Don’t forget to add pseudo domains to host file. After adding them, make sure to not save the file with any extension
  4. Make sure the spelling, the case and the symbols all match each other every where.
  5. Most of the time, reloading the vagrant will take away the

I hope that I have covered most parts of homestead.yaml. Let me know if its missing something or you need help.

Install Laravel Homestead on Windows Extremely Easily

29 Comments

Laravel Homestead

There are tons of reasons to do laravel development on Homestead. And though you might be convinced to use it, it is not always very simple to be “up and running” within minutes. Laravel’s official documentation on installing Homestead on Windows and Mac is pretty clear. But sometimes, the process is not as straight forward as shown in the documentation. There are a lot of 3rd party software involved and sometimes they create problems. I will be guiding you through the installation and configuration of Laravel Homestead while preventing the common errors from occurring.

Introduction

You may already know what Laravel Homestead is and what VirtualBox and Vagrant are. But just in case you don’t know then here is a brief introduction for them.

VirtualBox:

It is a software which helps you run a different Operating System on top of another Operating System. For example you have Windows installed on your machine and you want to use a Ubuntu on it as well. You can do it through VirtualBox. As the name Implies, it creates a Virtual Box or a Virtual Machine inside which you can install other operating systems. In this case, Windows will be your Host OS while Ubuntu will be your Guest OS.

Vagrant

Vagrant is a utility which help us automatically manage Virtual Machines inside Virtual Box. It also help us to ship our software to others or even to the production server with same environment in which we have coded it. Most of Php developers uses Windows or Mac to code on. The main problem with these OSs is that when we ship our software to a Linux environment, it breaks. Vagrant help us ship the software along the environment in an file format known as box e.g Homestead.box

Laravel Homestead

Homestead is a group of software and commands for Vagrant. The official list of what’s included in it can be found here. It automatizes and facilitates the installation of required software for a Virtual Server like Ubuntu, Nginx, MySQL etc.

In short, by combining VirtualBox, Vagrant and Laravel Homestead, one will be able to provide a production environment to Laravel inside Windows or Mac. So you can have all your favorite apps and software of your favorite OS along with the benefit of having a full fledged production level server running Ubuntu and Nginx. Now follow the following steps to get Laravel Homestead up on Windows.

Step 1: Downloading Files

The first step is getting the required software for Homestead. I used VirtualBox and as it is free, I am pretty sure most of you guys will be using it too. Download the VirtualBox from here for Windows (click on the link for windows in the first paragraph). After downloading that, we need to download Vagrant from here. If you have slow internet connection, you will need to download the Laravel Homestead box manually. It is more than 1 Gb in size and on slow connections, the experience can really get very annoying. I will cover that when Installing the Homestead box Later.

Step 2: Install VirtualBox and Vagrant

VirtualBox comes with its own installer which makes installation of VirtualBox very easy but problems may arise. There are a lot of reasons but some common ones are:

  1. Virtualization might not be enabled on your system
  2. There can be driver conflicts
  3. Some other programs specially Kaspersky anti-virus might cause problem

Enabling virtualization will need its own tutorial. For Driver conflicts, your best bet will be do disable the USB driver in the second step of installation. Click the Box to the left of “VirtualBox USB Support” as shown in the figure below. It will disable installation of USB drivers. (USB drivers usually terminate the installation without any specific error)

Installing virtualbox for Laravel Homestead

For the rest of steps, just click “Next” and “Yes”. Make sure that the VirtualBox is installed in the default Program Files directory so that you do not have to configure Vagrant for the path to VirtualBox.

Installation of Vagrant is even more easy. Just double click the installer and proceed with the steps provided. The installation will go smoothly. After that, open the command line utility of windows by searching for cmd in the start menu. Then type the following command in CMD

Vagrant version

If Vagrant is successfully installed then, it will display the version number of vagrant.

Step 3: Installing Vagrant Homestead Box

Homestead Box is the a compressed archive which contains all the required software for the Virtual Machine. I will mention two methods of downloading and installing the Homestead Box. The choice to choose one depends on your internet connection speed and reliability.

Fast internet Connection:

If your internet connection is fast enough and is reliable then download vagrant by the officially provided command. It will download the homestead directly. Run the following command in CMD.

vagrant box add laravel/homestead

After running the above command, you will see Vagrant downloading the homestead box with estimated completion time.

Downloading Homestead Box
Downloading Homestead Box
Slow Connection

Downloading Homestead box manually on slow connection will save you a lot of annoyance. Vagrant disconnects frequently after downloading some part of the file and will start downloading from start every time. To get around this problem, follow the following instructions.

  1. Download the latest Homestead Box manually by going to this URL: https://vagrantcloud.com/laravel/boxes/homestead/versions/5.1.0/providers/virtualbox.box
    /versions/1.1.0/providers/virtualbox.box. Note the bold version number (1.1.0), you will have to change it to the latest version of Homestead. Current version of Homestead can be found here.
  2. The downloaded file is usually of different name which is “hc-download” most of the time. Edit its name to virtualbox.box
  3. Run the following command in CMD: 
    vagrant box add laravel/homestead file:///Path/to/the/virtualbox.box
  4. If you have downloaded the virtualbox.box to Windows default “Downloads” folder then your path will be like this “C:\Users\YourUserName\Downloads”. Note that you will have to replace the bold “YourUserName” to your own username. Also don’t forget to prepend “file:///” to your path.
  5. Now you need to add a metadata_url file to your box’s folder. You can download this file from here.
  6. Move the metadata_url file to C://Users/YourUserName/.vagrant.d/boxes/laravel-VAGRANTSLASH-homestead. In case you have configured a different directory for Vagrant’s storage then you will need to find the boxes directory there
  7. Inside the laravel-VAGRANTSLASH-homestead directory, rename the directory “0” to the current version which is currently 1.0.1

Step 4: Installing the Laravel Homestead

Up till now, we have downloaded Laravel Homestead Box which is a Ubuntu OS bundled with required software. The Laravel Homestead on other hand, is a bunch of shell commands and configuration. Homestead enables you to access your Laravel App inside a Virtual Machine from your Windows browser. It also helps you automatically share folders between your Guest OS and Host OS.

Proceed by downloading the Laravel Homestead from its GitHub repository here. You will get a zip file, unzip it to “Homestead” directory. Create one if it don’t exist. It will be better if you create that directory in the your root folder so that you can access it easily.

After this, open the command line and navigate to the newly created Homestead directory by using the following command:

cd /d C:/User/YourUserName/Homestead

Replace the path in the above command with the path to the Homestead directory on your computer. Once inside that directory, run the following command:

init.bat

This will create a file Homestead.yml in a hidden directory named .homestead . It can be found at C:/User/YourUserName/ . As this directory is hidden, so you need to edit the viewing preference of your Windows to show Hidden files and Directories. In the .homestead directory, open the Homestead.yml file. Preferably use your code editor to edit this file as Notepad will cumbersome the file.

Step 5: Configuring the Laravel Homestead

Rest of the configuration is easy. The homstead.yaml is already configured for a default app. I have covered all of the configuration in great details here “Laravel Homestead.YAML Explained A to Z“. I will cover the basics here:

Authorize & Keys

These variables hold the path to ssh keys which are used by Vagrant to ssh into Guest OS. Its not available on windows by default. You will need to generate them and then place them in the path you have specified in Homestead.yaml . You can generate the ssh keys by using 3rd party software. I personally use the official Git client which you can download from Official Repository. After installation, launch the Git Command line and run “ssh-keygen” to generate the ssh keys. After that, you will need to add the path to the ssh executable to the system variables.

Adding Path to SSH Executable to the System

Search “System Properties” and after opening its window, click the “Advance” tab and then click “Environment Variables” at the end of that tab. You will get a new dialogue having two sections. Find the “Path” in the lower section and after marking it, click Edit. You will get a third dialogue box. Click “New” to the right and then add this path “C:\Program Files\Git\usr\bin” . Be careful as you can wipe all the system paths by mistake.

Folder Mapping:

Folder mapping means that your Guest OS and Host OS will share a common folder where you can keep your laravel files. Laravel Homestead configures a a default folder in the home directory of the Host OS. But if you want to change it then just edit the “map” by providing the absolute path to your desired folder. The beauty of folder mapping is that one can edit the code using windows software like PhpStrom while executing the code inside the a virtual environment.

Sites:

Sites is a configuration array for Nginx. By default configuration, you will have a “homestead.app” pseudo-domain which will point to a folder inside the “shared folder”. Any php code inside that folder will get executed when you will go to homestead.app inside your browser. You should set it to the “public” folder of your laravel app. Set it to “/home/vagrant/Code/Laravel/public” for now as we will be installing laravel in that way.

Step 6: Configuring the Host File of Windows

Your configuration is nearly complete. Now you need to tell windows to look for a specific ip when you enter homestead.app in the browser. Edit it as follow:

  • Go to C:\Windows\System32\drivers\etc\hosts
  • Open the hosts file with administrative access
  • Add the following line to it. You can add it anywhere but for ease, add it at the top of the file. 
    192.168.10.10  homestead.app
  • If you have problem saving the file, then first copy the Host file to desktop, edit it and then save it.
  • After saving move it to the above mentioned path and replace the original one
  • Be careful not to save it with any extension like txt etc

Step 7: Rise and Shine Homestead

Open CMD and navigate to Homestead directory. Its the directory where we unzipped the homestead archive from GitHub. Then run the following command.

vagrant up

You will have your Homestead running in no time. Now go to homestead.app in your browser and be ready to get an error. Most probably “No input File Found”. It is because we don’t have laravel app’s “public” folder yet. We will install laravel in the next step.

Step 8: Install Laravel

This is the last step. If you have added the ssh keys in the proper place or have used PUTTY to create them for you then proceed as follow:

  • Enter the command “Vagrant ssh” while vagrant is up
  • It will connect you to the Ubuntu OS on virtual machine
  • Navigate to the shared folder by entering this command in the CMD 
    cd ~/Vagrant/Code
  • Then run the following command 
    composer create-project --prefer-dist laravel/laravel Laravel
  • It will install laravel in the Code folder. You will see a Laravel folder inside it.
  • Make sure you have already edited the “Sites” configuration inside the homestead.yaml to “/home/vagrant/Code/Laravel/public”

When the composer installs the laravel, then head over to homestead.app in your browser and you should now see a fresh installation of laravel.

You may encounter errors and problems while following the above steps but everyone do. Homestead is very easy to install and configure and after a few minutes of playing around the problems, you will be able to fix it. Let me know in the comments, if I am missing anything in the article or if you are stuck with laravel homestead. I will be publishing more articles on homestead and will like to tailor them to the beginners problems.

404 Room: The Story Behind 404 Not Found

Leave a comment

404 Not Found

Once upon a time in a far far land (Not that far, it was in Switzerland). When there was no internet and web meant a spider web. Some young scientists were coding something for their own use in  a Laboratory know as CERN. CERN is abbreviation for Conseil Européen pour la Recherche Nucléaire (French: European Laboratory for Particle Physics). Its located at Geneva, Switzerland. They were creating protocols by mean of which computers located in different rooms could communicate with each other.  While most of protocols and technologies they developed later became the building block of current web. But one of them got more attention that is “404 NOT FOUND” error. Even non-programmers get a pretty good idea that the content they were looking for does no exist, when they see this message.

404 was number of a room at CERN. It had a computer and two to three guys working there. The computer contained a database. Querying information from that database was just a request away. Any connected computer was able to send request to 404 room. The staff then used to search for those information and send them to the computer which requested them.

Eventually, the database grew up and they started to automatize the whole process. They created programs to search for the information automatically and serve that to the users. As time passed, the number of requests for information grew. And then the system started generating strange errors. Reason was that either the requested information did not existed or their request query for the database was misspelled.

To handle that problem, they edited the program to reply “Room 404: Not Found” whenever a given request could not be fulfilled. At that very time, they gave birth to the 404 Not Found Protocol. As web grew bigger and spread out of CERN to the whole world, the 404 Not Found Protocol was adopted as one of many standard protocols.  Though, it was renamed from “Room 404: Not Found”  to “404: Not Found”.

That was a short but interesting story about the Four-0-Four. Besides 404, there were other room numbers like 200, 302 etc which pretty much explain the wired numbering of now a days HTTP request codes. They also developed the Hyper Text Markup Language (HTML) which is the only language to give structure to the web pages. The idea behind HTML was to serve text and image in one file. And to link to other such files from that file.

The guys at CERN never knew that what they are doing is going to change the world and life of humans. Web in now multi-trillion dollars industry and is continuously progressing. All this would have not been possible if the young minds at CERN adopted themselves to classical system of data exchange in form of papers.

So do whatever you think you can do and who knows one day you might be known as father of some innovation besides your own kids.

Babies’ Standard Age Calculator

Leave a comment

Enter age in months below

 

It was required for our research assignment. Calculating it manually by putting all the values in the formulas was too time consuming. So I created this. Hope it may helps someone else as well.

jQuery Form Clone Plugin – Form Cloning in 6 easy steps

4 Comments

jquery form clone

For this tutorial, we will be using SheepIt jQuery Form Clone Plugin. We will create a form and will then add the necessary JavaScript. You can check the Demo Here. Following are the steps:

1. Adding jQuery Form Clone Plugin:

First of all download the sheepIt Form Clone Plugin from here . Include it in your HTML after including jQuery as follow.

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="path_to_file/sheepItPlugin-1.1.1.min.js"></script>

After adding the plugin, we will create the form template.

2. Creating Form Template:

Form template consists of 3 main parts identified by id attribute. All these parts are wrapped inside a main div.

  1. Form Template
  2. No Form Template
  3. Form Controls

First of all create your <form> tag and add all those elements which need not to be cloned.

<form method="post" action="your_desired_url">
    <!-- All Elements not required to be cloned -->

</form>

Now add a <div> inside that form tag. Remember, your form clone template needs to be inside the <form> tag else it will not get submitted.If the form element is wrapped in the template div then whole form will be cloned which can result in multiple form clones instead of single form with cloned elements. After creating the div, identify it by id=“form_clone“.

<form method="post" action="your_desired_url">
    
    <div id="form_clone"> <!-- div container for form clone-->

    </div>
</form>

3. Form Template

Form template will resides inside the form_clone (Our main wrapper div). It consist of a wrapper div identified by an id suffixed with _template which in our case will be form_clone_template. All the form elements which are required to be cloned will reside inside this div. After adding a single <input> tag and its <label>, your code will become like this.

<form method="post" action="your_desired_url">
    
    <div id="form_clone"> <!-- div container for form clone-->
     
        <div id="form_clone_template"> <!-- Div container for form elements to be cloned -->

             <label for="form_clone_#index#_websites">
                 URL <span id="form_clone_label"></span>
             </label>

             <input id="form_clone_#index#_websites" name="websites[#index#]" type="text"/>

        </div>

    </div>

</form>

On inspecting the above code, you can see multiple id’s inside the form_clone_template associated with different tags. These id’s are used by SheepIt jQuery Form Clone Plugin to index them. So that when we clone the form, the plugin will auto increment the index and will add them dynamically to the page. Let’s explain the id STUFF.

Index Format

#index# is the default index format of the plugin. When page is loaded, it will be replaced by 0 (zero) for the first row of input element and as we continue to add forms, it will get incremented and will be added anywhere where the index format is specified.

Label

Looking at the first tag viz label, we have for attribute as “form_clone_#index#_websites”. If you look at the input tag, you will find that its id follow the same pattern. With index format (#index#) inside it, the label is made sure to work only for its own input field.

Inside the <label> tag you will see an empty <span> tag. This tag is intended to show the index number as the form is cloned. E.g in our case it will be URL 1, URL 2, URL 3 and so on…

Input

Input field holds two important attributes. Id and Name. Id has already been explained. The name pattern is important. As the cloned input field will bear same name for all row, we need to submit the data to server as an array. For that array to work, we use name attribute like name=”someName[ ]” which in our case is name=”websites[#index#]”. Name of the input field followed by a square bracket will turn the field to be submitted as array. Index format inside the brackets will give a unique key to every array element and hence will prevent loss of data by input fields sharing same key. Data submitted by such input fields looks somewhat like this.

websites = array(
                  0 => 'Submitted URL',
                  1 => 'Submitted URL',
                  2 => 'Submitted URL',
                  3 => 'Submitted URL',
                  );

4. No Form Template:

This template is shown when there are no input fields. It can happen if the user deletes all the cloned form elements or if you ask the form clone plugin to not show any form on page load initially. It is wrapped inside a div bearing an id=”form_clone_noforms_template”. You can add any customized message inside it and can use normal HTML and CSS to decorate it. Add it after the form template.

<form method="post" action="your_desired_url">
    
    <div id="form_clone"> <!-- div container for form clone-->
     
        <div id="form_clone_template"> <!-- Div container for form elements to be cloned -->

             <label for="form_clone_#index#_websites">
                 URL <span id="form_clone_label"></span>
             </label>

             <input id="form_clone_#index#_websites" name="websites[#index#]" type="text"/>

        </div>

        <div id="form_clone_noforms_template"> 
            Please Press the plus sign to start
        </div>

    </div>

</form>

5. Form Controls:

These are sets of controls which can be used to clone/delete any number of input fields. For Sake of simplicity, I’ll just explain 3 of them. Create a div wrapper for the controls. Give it an id=”form_clone_controls”.  Now add three tags of any type inside it. You can use either buttons or div or any other tag as long as it bears the required ids. Here is your complete form with form clone template.

<form method="post" action="your_desired_url"> <!--Form Start-->
    
    <div id="form_clone"> <!-- wrapper for form clone-->
     
        <div id="form_clone_template"> <!-- wrapper for form elements to be cloned -->

             <label for="form_clone_#index#_websites"> <!-- input field label -->
                 URL <span id="form_clone_label"></span> <!-- Auto Incrementing index -->
             </label>

             <input id="form_clone_#index#_websites" name="websites[#index#]" type="text"/> <!-- form element to be cloned -->

        </div>

        <div id="form_clone_noforms_template"> <!-- If there are no forms -->
            Please Press the plus sign to start
        </div>

        <div id="form_clone_controls"> <!-- Form controls to clone form or delete it -->
             <span id="form_clone_add">Add URL</span>
             <span id="form_clone_remove_last">Remove Last URL</span>
             <span id="form_clone_remove_all">Remove All</span>
        </div>

    </div>

</form>

Control ids are pretty self explanatory. Now as we have completed the form clone template, let’s power up the jQuery Form Clone Plugin.

6. Powering Up The Form Clone Plugin:

Just include the  following JavaScript code snippet to your page. You can add them after you include the required jQuery core file and SheepIt jQuery Form Clone Plugin.

$(document).ready(function() {
    
    var sheepItForm = $('#form_clone').sheepIt({
        separator: '',
        allowRemoveLast: true,
        allowRemoveAll: true,
        allowAdd: true,
        maxFormsCount: 10,
        minFormsCount: 0,
        iniFormsCount: 1
    });
 
});

That’s it. You can find a working DEMO HERE. Besides to avoid any error when cloning the form, follow these tips:

  1. Watch for ids very carefully as this jQuery form clone plugin is totally dependent on it
  2. Avoid mistakes in index format. e.g #index, #INDEX#, index etc are neither same nor gonna work unless you specify them.
  3. This form clone plugin clone the form after DOM has loaded. So any validation on the cloned input fields will not work unless specified after their creation.

This was just a quick and brief tutorial about sheepIt jQuery Form Clone plugin. More posts will be coming soon explaining the api and nested form techniques . So stay tuned. For any suggestion or comments please let me know by comments.

CSS3 Animated Text Field – Quick and Easy

1 Comment

Animating different parts of a webpage has nearly became a trend. Modern websites tend to be more responsive in sense of giving beautiful visual feedback. There are some Jquery based animated text field libraries out there, but doing it with CSS is more cooler. Specially when CSS3 offers more robust and powerful APIs.

I recently went through a CSS inspirational library of animated text field at codrops. This library is experimental but if you know that majority of your visitors are using modern web browsers, then you can rely on it. Making your text fields animated will make your next project even more eye catchy.Animated Text Field - Yoko

The Markup:

Html markup of the input field is simple. In order to make a simple text field animated, you will have to go through following modifications:

  1. Wrap your text field in <span> with class name of the desired CSS effect.
  2. Then add your <input> text field tag. Again with the a specific class name.
  3. After <input> add a <label> tag. Its is used for the animation of text field on focus.
  4. Inside the <label> add a <span> tag to decorate and position the label of the text field.

Now you are done with the HTML. A typical markup for the above GIF of YOKO animated text field will be as follow.

<span class="input input--minoru">
    <input class="input__field input__field--yoko" type="text" id="animated-text-field">
    <label class="input__label input__label--yoko" for="animated-text-field">
        <span class="input__label-content input__label-content--yoko">City</span>
    </label>
</span>

Be sure, that you will have to use the default HTML attributes for <input> and <label>. Like id and for.

The CSS:

There is not much to do with CSS. It is already well written with proper class names. All you have to do is to include the file in your HTML page. And then add the proper class names to <span>,<input>,<label> and again to the child <span>. Some GIF demos which I have captured are as follow along with the class names:

 1. Haruki

Animated Text Field - Haruki

  • <span>: input input–haruki
    • <input>: input__field input__field–haruki
    • <label>: input__label input__label–haruki
      • <span>: input__label-content input__label-content–haruki
2. Hoshi

Hoshi has following animation for text fields

Animated Text Field - HoshiJust replace haruki with hoshi at the end of all class names.

3. Kuro

Animated Text Field Kuro

Same as hoshi,replace with kuro

The best thing about these animated text fields is that you can easily implement them. They are easy to switch and are more dependent on CSS. Though if you are using some jQuery library like Live Search Plugins then there are chances that things can get messy.

Also, if you don’t have adequate space to accommodate the animated text field in width and height as coded by the developer then there is probability of poor readability and animations. So try to use them on roomy pages like Login Page.

You can download the library from GitHub. If you are interested in more technical details then you can read the article on the author website above. There are about 26 animated text field effects to choose from. So download the library, experiment with it, use it and let me know if it helps : )

 

Laravel Ajax 500 Internal Server error – 5+ Reasons – Quick Fix

19 Comments

Recently I started working on project using Laravel. I kinda started loving it. The first problem I encountered was with AJAX. I was submitting a form using Ajax. When the form was submitted, the console was logged with 500 Internal Server Error. I dig the problem.I searched the Google for few hours and then I found the solution. Following are the reasons:

Laravel ajax 500 internal server error

500 internal Server Error from Zurb

CSRF:

The  commonest reason for laravel ajax 500 internal server error is missing CSRF token. Specially in Laravel 5. In laravel 5, CSRF token is required on all forms. People usually forget submitting the token with ajax request. Submitting token-less ajax request results in Internal Server Error.

To fix missing CSRF token,  just add a hidden field in the form and BOOM!! .Here is the code for you to add to your form:

1. For Blade Template Users:

<input type="hidden" name="_token" value="{{ Session::token() }}">

2. For non Blade Users:

 <input type="hidden" name="_token" value="<?php Session::token() ?>">

3. Directly as ajax data:

var request = $.ajax({
  url: "script.php",
  method: "POST",
  data: {  _token : <?php Session::token() ?>},
  dataType: "html" 
});

That’s it, it will solve your problem most of the time. Other reasons that can give you Laravel 500 Internal Server Error problem might be:

Wrong Route:

You may be submitting ajax data to wrong route type and even wrong url (404). So first double check the path you are submitting to. Second, check whether the route accepts “Post” or “Get” data type. Because submitting post data via Get method or vice versa will results in Laravel ajax giving 500 Internal Server Error.

Data Type Returned:

If you are returning Boolean and your ajax code is set for Json or any other data type then chances are that you will stumble up on the internal server error. Try to set data type for all ajax response to json. If you are using jQuery then set dataType to xml, json, script, or html like this:

var request = $.ajax({
  url: "/action",
  method: "POST",
  data: { id : userId },
  dataType: "json"
});

Cross Domain Configuration:

If you are using ajax for cross domain requests then be sure that you are sending proper headers. In case of jQuery, just set the crossDomain variable to true.Alternatively set dataType to “jsonp”

.htaccess

To be honest, .htaccess contributes to 80% of the web’s 500 internal server errors. Regardless of laravel and ajax. Check your .htaccess file for any error specially after you have edited it.

Syntax Error

If your php file has some error and your hosting provider has configured there servers to give 500 internal server error on all php errors. Then examine your file line by line and find the little bug troubling you.

Directory Permission

In case if the storage directory is not writable by Laravel then it will throw a 500 internal server error. Though this error will occur on all requests to the framework regardless of whether it’s through ajax or not. To fix that, run the following two commands through the command line tool on Ubuntu:

sudo chmod 755 -R laravel
chmod -R o+w laravel/storage

The “laravel” in the above command is the name of the directory where Laravel is installed. For other Linux distros, search for the commands to change the permissions of a directory to make it writable.

The most important thing in fixing your error is to find the cause. If your ajax request gives you 500 internal server error then log the response to console. Alternatively, you can submit a regular form and can see the response of the files. Laravel has good error handling library and it show in details the causative agent.

If your Laravel ajax internal server error still persists, then please let me know in the comments. I will be more than happy to help