CodeIgniter 3 Tutorial 1: Download, Installation, Introduction and Welcome!

Back to CodeIgniter Tutorials

This is the first part of CodeIgniter 3 tutorials. CodeIgniter 3.0 introduced a lot of upgrades over 2.x versions of CodeIgniter. Users who wish to upgrade to CodeIgniter 3 may have to perform changes as mentioned here in the official CodeIgniter 3.0 documentation.

Here are my Tutorials for CodeIgniter:

CodeIgniter 3 Tutorials
CodeIgniter 2.2 Tutorials

This tutorial series is for new users of CodeIgniter users who wish to start with CodeIgniter 3.x. We will start with downloading Codeigniter.

CodeIgniter can be obtained from any of the two places.

  1. Official Website Here
  2. Official Github Repository Here

Lets download from the official website

Now, install XAMPP as I have explained here and also here for my CodeIgniter 2.2 Tutorials Series.

Now, once you have installed XAMPP and downloaded CodeIgniter 3, we can now start installing CodeIgniter. Follow the following steps.

  1. Assuming you installed XAMPP in D:\, go to D:\xampp\htdocs
  2. For this example, create a subfolder “tutorial” so we now have,
  3. Now, extract the contents of downloaded CodeIgniter files here.
  4. You will now have the following base structure of CodeIgniter.
  5. CodeIgniter is INSTALLED!
  6. Here is the simple explanation of all of these files and folders (You can skip if you are already familiar otehrwise, I highly recommend reading the brief descriptions below):
    1. \application\
      (108Kb, 45 Files)
      This folder contains the web application that you will develop using CodeIgniter.
    2. \system\
      (2.05MB, 202 Files)
      This folder contains the actual CodeIgniter framework. In other words, the cool stuff! It is not necessary, but it would be nice to open this folder by yourself and see how everything works behind the scenes. Also, this is the folder that is affected with each version. So yuou might be required to make changes to this folder if you ever wish to upgrade.
    3. \user_guide\
      (6.41MB, 191 Files)
      This folder contains the latest CodeIgniter documentation at the time of release of whichever version that you downloaded. It is SAFE TO DELETE this folder at the cost of losing offline official guide. I personally delete these from my projects to save size.
    4. \.gitignore
      This file tells Github to ignore the specified files and folders to be ignored when committing to a repository.
    5. \composer.json
      This file is used with composer to keep the packages up to date.
    6. \contributing.md
      Simply put, this is a readme file for “contributing to the CodeIgniter project” topic.
    7. \index.php
      This file contains variables that control how your application behaves. For example,

      1. Error Reporting levels
      2. \system\ folder name (which it allows to be changed)
      3. Want to know how to change \application\ folder name? This file does it!
      4. Want to move the \application\view\ folder out of the \application\ folder? index.php does it!
      5. Override application routing.
      6. Meddle with the config parameters.

 

And some more parameters which should not be touched and if you did, then God help you.

 

    • \license.txt
      Legal stuff about CodeIgniter Project
    • \readme.rst
      Official Readme of the CodeIgniter project!
    • You will see the following default welcome screen:

Back to CodeIgniter Tutorials

Codeigniter 2.20 – Sending E-mail using codeigniter

Back to CodeIgniter Tutorials

In CodeIgniter, sending e-mail is a simple process. First the library is loaded. Then the user provides e-mail related data. Finally, the E-mail is sent. Here is how E-mail is sent using a Controller in CodeIgniter

  1. Load the E-mail library of CodeIgniter
  2. Provide set of characters that are to be permitted in the E-mail address.
  3. Initialize the type of e-mail as html (options text or html)
  4. Provide Sender’s E-mail address
  5. Provide Receiver’s E-mail Address
  6. Provide BCC E-mail address
  7. Provide Subject of the E-mail
  8. Provide Body of the E-mail.
  9. Send the E-mail!

Following is the complete code of the above process.

Let me know in comments if there is something that you would like to know. And do like an share.

Back to CodeIgniter Tutorials

Codeigniter 2.20 – Learn how to make live search using Codeigniter

codeigniter live search

Back to CodeIgniter Tutorials

You may have seen live search <input> boxes all over the internet. Here is how to make that live search in reference to the design of the following image using Codeigniter 2.20 and 3.0.

codeigniter_json_encode1
Example of live search using input box

This technique will use the following steps.

  1. User types in an input box.
  2. A call is sent to controller with input parameters taken from input box.
  3. Controller calls model.
  4. Model searches database and returns with or without an input to the controller.
  5. Controller uses json_encode() on result of model and sends the data to view.
  6. View receives data from controller and shows it on the interface.

Please note that you must have a working codeigniter installation and database connection. You can use XAMPP for that if you need to test.

MODEL

Create a table of hotels and use the following model

VIEW

Then set up a view and add jquery and bootstrap support along with bootstrap-typeahead

 Controller

Finally, use the following code in a controller function to call the model from view.

With this done, you will now be able to use live search in your interface.

I hope you find this helpful. If you have any questions, then please post in the comments. I will be glad to help.

Kind Regards,

Codeonion

Back to CodeIgniter Tutorials

Codeigniter 2.20 – Making your own home page

Back to CodeIgniter Tutorials

Now that  you have learned how to install codeigniter, it would be prefereable to replace the default codeigniter welcome page by something that we have made. By the end of this tutorial, when you will visit localhost/yourapp you will be presented with your own home page instead of the the default codeigniter Welcome page.

Install Codeigniter

First install Codeigniter. And make sure that you get the following page when you go to localhost/yourapp

Codeigniter installing xampp

Now we can get started.

Setting custom controller (which is first loaded)

In codeigniter, when you visit www.yourapp.com, a default controller is run by the server. This can be customized by editing a config file. This file is located at

localhost/yourapp/application/config/routes.php

Open this file and look for the following line:

Replace this line with a line which points out to our own controller (which we will make shortly)

We have just told codeigniter to point to our own controller instead of the default welcome controller which calls the welcome_message view. If you visit your website nowcodeigniter will try to access homecontroller but that does not exist yet. Lets make one!

Creating our controller

  1. Go to localhost/yourapp/application/controllers/
  2. Create a new file named homecontroller.php
  3. Add the following code in this file and the save it.

You have just created a controller which is pointing towards the view homepage. Lets create a view to finish the ritual.

Creating our View

  1. Go to localhost/yourapp/application/views/
  2. Create a new file named homepage.php
  3. Add the some HTML code to it like a paragraph. Maybe mention a Hello World!

You have just created a view which has our Hello World. Now you can use CSS styling to create more detailed websites.

 Lets test it

  1. Go to localhost/yourapp in your browser.
  2. You will see your new page/view 😀

Congratulations!

You have not only learnt how to install codeigniter, but also learnt how to set it up and make your own home page. In the next step, we will learn how to manage assets in codeigniter such as png, jpg, mp3, js, css, etc files.

Back to CodeIgniter Tutorials

CodeIgniter 2.20 – How to set up in XAMPP

Codeigniter_1_Installation_in_xampp

This is the first part of the CodeIgniter 2.20 tutorials series. In this part, you will learn how simple it is to install CodeIgniter in XAMPP.

Lets assume that the web application you are making is “yourapp”.

  1. First go to CodeIgniter website and download it.
  2. Now go to your www or htdocs folder in XAMPP and create a new folder for your application. Lets name it yourapp.

    CI_in_xampp

  3. Copy the downloaded CodeIgniter .zip file into your folder (yourapp) and unzip it. You will have a folder looking like this.
  4. Now go to the following link in your browser: http://localhost/yourapp/
  5. You will be presented with the welcome screen of codeigniter.

Codeigniter default welcome screen

At this stage, you have CodeIgniter ready for your application development. The page you are seeing is a view at application/views/welcome_message.php which is loaded using the controller at application/controllers/welcome.php

Back to CodeIgniter Tutorials

Codeigniter 2.20 – How to manage assets (js, jpg etc) (using View)

Back to CodeIgniter Tutorials

In this guide, you will learn to use CSS and JS files by calling them from the VIEW (not the controller). In the coming lessons, I will also write on importing assets using Controller but here, we are using views.

  • First, install Codeigniter using the method as described here.
  • Then make your own homepage using the method explained here.

Now that we are set up, lets get started!

  1. Go to your Codeigniter folder and add a folder called assets such that it should look like this yourwebsite/assets/ For reference, look at the following

    codeigniter assets folder
    codeigniter assets folder
  2. Inside /assets/ create three folders which should look like this
    1. CSS folder named css
    2. Javascript folder named javascript 
  3. In the css folder, create style.css
  4. In the javascript folder, create scripts.js
  5. Go to your homepage and paste the following in the <head> tag.

  6. That is all. You can similarly add jquery and images in the same fashion. In order to confirm that the CSS and javascript is loaded, you can check source of the loaded page and click on the .css and .js files

Please note that this guide is applicable on using XAMPP. For web server, you may have different folder paths for example:

I hope you find this tutorial informational. Do not forget to comment and share 🙂

Back to CodeIgniter Tutorials