CodeIgniter 3 – Create your own Hello World with simple form and database!

CodeIgniter 3 Hello World

In the previous tutorial, you you learnt how to remove the “index.php” from URL. Now, we are ready for the “Hello World!” complete with code

GOALS!

In this tutorial, we will learn CodeIgniter 3 MVC by making a Hello World! program, complete with database, introduction to CRUD operations, form, switching pages and code. We will cover a LOT in this tutorial and I am sure you will get a lot of knowledge about CodeIgniter 3. Check the following list to see what you will learn.

  1. Create a database to be used by Model
  2. Connect the database to the web application
  3. Create a custom model:
    • Model will use the Database
    • model will contain a “Hello World!” in a function as a return value for controller to use.
  4. Create two custom views:
    • We will Load views from controller.
    • Pass data to the views using controller.
    • Use data from controller in Views.
    • Make a form which will work along with Controller.
    • Call controller custom function.
    • Pages association (move from page to page)
  5. Create a controller that will:
    • Load the model.
    • Use model function in controller.
    • Receive input from model in controller.
    • Interact with database using model.
    • Pass data to views using data[] array.
    • Create custom controller function.
    • Load views.
    • Load view from a button in another view.
    • Use helper;
    • Use constructor.

As you can see, this is a seriously deep “Hello World!” tutorial. I am sure that you will learn a lot in the end. You will be prepared to learn more without having to worry about learning the basics. Lets get started!

BEGIN!


Creating the Database

1. Create a Database

We will create a database to be used for this tutorial.

  1. In XAMPP, go to localhost/phpmyadmin/
  2. Create a  database called “citutorial
  3. Create a table using this SQL query
  4. Now make a simple “Hello World!” entry in the table so that the table has just a single entry of
    id = 1
    message = Hello World!

Eventually, your table should look like this,

 

2. Connect the Database

Go to the /application/config/database.php and modify the settings for the database citutorial. You need to input the database username, password and database name. By default, the username in XAMPP is “root” and password is empty i.e. “”. And the database name is “citutorial. So the settings are,


Creating the Model

Understanding the Model

We will now understand the model which will retrieve the “Hello World!” message from the database table we created in steps 1 & 2. First, I will show you what method I used and then you will get the entire model code.

For this tutorial, I have first selected the “table” in our database using this line of code.

Then, I provided the criteria to find the “Hello World!” message from the table like this. Note that in the following line of code, “message” is the column name and “Hello World!” is the specific search keyword that is to be matched in order to retrieve the value.

Then, I checked if the query was successful and performed an action on the basis of the success or failure of the query like so.

Note that in the end, I simply returned the result of the query like this.

(Alternative approach)

Now, note that all of this could also have been done using the following model function (which I won’t use).

3. Creating the model

Lets finally create the model file and add the code.

  1. Go to \application\models\1_hello_world\ and create a file called “Helloworld_model.php”.
  2. Double check that the file name starts with a capital letter since it is important in CI3.0+ versions.
  3. Now, open the file and add the following code to it.

This completes the model to be used in this tutorial.  Next, we will prepare our views to receive the input.


 

Creating the Views

For this tutorial, we will make two views.

  1. First view will be used to request a “Hello World!” query.
  2. Second view will be used to show the output (either failure or success)

4.1 Creating a view to request for a “Hello World!” message

This view will show a page which will ask the user to press a button to perform a request. Here are some points to note:

Follow these steps to make the request view..

  1. Go to \application\views\1_hello_world\ and create a file called “request_a_helloworld_message.php”.
  2. Add the following code to it.

4.2 Creating a view to show result

Upon completion of the request, an output message will be generated. This could contain either the “Hello World!” or an error message informing us about the failure to find the “Hello World!” message in database table.

    1. Go to \application\views\1_hello_world\ and create a file called “resultDisplay.php”.
    2. Add the following code to it

 

Creating the Controller

Now comes the really interesting component of CodeIgniter. The Controller! The controller will allow us to perform the following functions of the Hello World! tutorial application.

    1. Load the database to be used by the Model.
    2. Allow switching between two views with a button.
    3. Send data from controller and model to the view.
    4. Loading views.
    5. Calling model functions and passing its result into the view.

Now, lets first understand how I used the controller in this tutorial.

Understanding the Controller

In my controller. I have two functions which are,

    1. index() function which by default loads a request view.
    2. requestModel() function which is called by clicking a button in the “request_a_helloworld_message.php”  view.

 

index()

In this function, I am simply loading a view and passing data to it. The data is passed as an array like this,

The reason I have done it is to show you how it is possible to control the data you wish to show in view from the controller, instead of actually typing it into the view as simple HTML.

When loading views, it is possible to pass data to it. You can even load entire views into variables and pass them into the view.

 

requestModel()

In this function, I am calling a model function and basically passing its result into the view.

I am calling a model and giving it a name of “helloworldmodel” like this,

Afterwards, I have called a model function called “return_helloworld_message()” and stored its output in “$data[‘modelData’]” like this,

Finally, as before, I have loaded a view to show results and passed data to it like this.

 

5. Creating the controller

Now, we will finally create a controller and put the code in it.

  1. Go to \application\controllers\1_hello_world\ and create a Helloworld.php” and make sure that the file name starts with a capital letter
  2. Copy the following code into the Helloworld.php controller.

    Now, you are ready to test the application.

 

Testing the Hello World! application

  1. Go to your browser (chrome in my case) and go to the following address (or the correct address according to your own setup)
    http://localhost/tutorial/1_hello_world/helloworld
  2. You will see the following on the browser
  3. Press the “Submit a Request to model” button and you will go to the following link
    http://localhost/tutorial/1_hello_world/helloworld/requestModel
  4. At this point, you will be seeing this output,
  5. At this point, you can press back to start over.

You can now see that your application can retrieve data from database. This is it! the tutorial is complete!


Conclusion

You have learnt how to create a complete MVC application using CodeIgniter complete with the database. You now have the knowledge required to learn and develop more advanced web applications.

If you found my post helpful or have any questions, please leave a comment. [button link=”https://www.facebook.com/ubaaconsultants” type=”small” newwindow=”yes”] Facebook[/button] [button link=”https://twitter.com/Codeonion” type=”small” newwindow=”yes”] Twitter[/button]

If you think that there is something missing, or you would like me to add something or even, if you wish to request a tutorial, just let me know and I will make a tutorial just for you.

Back to CodeIgniter Tutorials

CodeIgniter 3.0.1 Tutorial 3 – Getting Rid of “index.php” from URL (with download)

In the previous tutorial, you learnt about the purpose of each and every folder in the /application/folder of your web applicaiton.

This is a short tutorial in which you will learn how to get rid of the “index.php” from the URL of your web application using a .htaccess file.


Problem

In a default installation of CodeIgniter 3, the URL looks like this

http://localhost/tutorial/index.php/1_hello_world/helloworld/requestModal

The URL looks bad because of the “index.php”. It is possible to get rid of “index.php” using a simple file in your application’s root.

Solution

The “index.php” can be removed by simply putting a .htaccess  file in the root of your web application. Download the file from GitHub

[button link=”https://github.com/codeonion/CodeIgniter-removing-index.php” type=”big” newwindow=”yes”] DOWNLOAD from Github[/button]

The .htaccess file should contain the following text. The link I have provided from my github repository is ready for you to use.

Now go to the root folder of your CodeIgniter web application and make sure that you put the .htaccess file there.

Now, you can safely change your URLs from

<form method=”post” action=”<?php echo base_url();?>index.php/1_hello_world/helloworld/”>

To

<form method=”post” action=”<?php echo base_url();?>1_hello_world/helloworld/”>

Note that it is still possible to keep using the “index.php” in your URLs and it will show up in URL if you do.

That’s it! You have successfully removed the “need” to have “index.php” in your URLs.


 

If you found my post helpful or have any questions, please leave a comment.

Back to CodeIgniter Tutorials

Tutorial 2 – CodeIgniter 3.0.1 Understanding application folder structure

Back to CodeIgniter Tutorials

In the previous tutorial, you learn how CodeIgniter is downloaded, installed, and viewed the welcome screen to make sure that it worked.

In this tutorial. you understand how the the purpose and working of \application folder in your CodeIgniter project. This tutorial is meant to be simple to understand so that new users of CodeIgniter get a general idea of how to organize the project in CodeIgniter.

You can skip this tutorial if you already understand the structure of \application\ folder’s contents.

First of all, go to the CodeIgniter folder and open the application folder as shown below.

 

Inside the \application\ folder, you will see the following directory structure.

 

 

Now I will try to make it simple for you to understand the purpose of these folders. Chose the folder name you are interested in learning about from this list below. Enjoy!

Cache

Generally, cache stores data that is to be used in future. So, lets say if your application uses data that is used a 100 times in a minute, it would be preferable to “cache your data” so that time and processing power is saved by reducing the “loading” process.

In CodeIgniter, you can perform Caching too. Once your page is loaded, subsequent loads will trigger your application to load from the cache. This will improve your web application’s performance.

In order to perform caching, all you need to do add the following code (replace n with value) in the controller on which you wish to perform caching.

Where, n is the number of minutes that you wish your page/controller to be cached. So if is set 100, the controller will remain cached for 100 minutes. Afterwards, the page will be cached again.

In order to stop caching, simply remove the above code and caching will stop and pages will be loaded every time.

Config

The config folder contains configuration files that allow you to configure your CodeIgniter application. For example, the “database.php” configuration file allows you to setup one or more databases to be used in your application. The “autoload.php” config file will load up libraries, helpers or even your custom defined config files so you don’t have to call them again and again in your project. This feature should be used on a need-basis.

Speaking of custom config files, it is also possible to define your own config files in this folder and call them up in your controller. This will allow you to make your web application more flexible. Many 3rd party tools would require you to put their config files in this folder.

Please note that you might put critical information in this folder so it is important to have security as your top priority when hosting your projects.

Controllers

The flow of the web application is controlled by the “controller”. If the user presses a button, the controller handles its server side functionalities. If database request is made, it is moderated by the controller. If a web page is to be loaded, (i.e. a view) the controller does it. Roughly, we can say that controller is the brains of the CodeIgniter web application. If the controller does not work, nothing else associalted with it will!

The controller can pass parameters to the view, such as a username of a logged in user is retrieved from the database table of users. First the controller will use a model to retrieve username on the basis of logged in user’s authentication and identification. Afterwards, the controller will pass that username parameter to the view and view will be able to use it to show it on the browser.

As of CodeIgniter 3.0, the name of the Controller class file must start with an uppercase letter. So for instance, I would name my class as Calculator.php. The name “calculator.php” is incorrect. My next tutorials will cover Controllers.

Core

CodeIgniter has core classes in \system\ folder (outside the application folder). These core classes make up the CodeIgniter framework of PHP. In most cases, you won’t need to make any changes to the core classes of CodeIgniter.

But, if you actually need to modify the core classes of CodeIgniter, all you need to do is to create a class in “\application\core\” folder that has the same name as the core class file name in “\system\” folder. CodeIgniter will use your defined class instead of the native CodeIgniter class.

Again, it is not something that one does every day. But it is good to know that a wonderful feature such as this one does exist.

Helpers

Need help in doing a task? Use a Helper!

A helper either a native one, or a custom defined helps you in tasks. Take a few examples:

  • FORM HELPER: Used to create a form that works perfectly with CodeIgniter and hosts a lot of added features.Call it using the following line in Controller.
  • DATE HELPER: This won’t get you on a date, but you will definitely get date features in your web applications. Date, time, time zones, it has so much to offer.

I will cover more on the helpers more in the coming tutorials.

Hooks

While “\core\” folder hosts class files that completely replace native CodeIgniter files, the Hooks feature allows you to hook into the flow of CodeIgniter application and meddle with it. Here are some simpler features for you to know about what hooks can do:

  • You can use hooks to performs actions before even system files are loaded.
  • You can do something before the first controller is called (check routes.php in \application\config\ folder).
  • You can perform an action between calling a controller’s constructor and calling its methods. Twisted, eh?
  • Do something after a controller is completed its functions.

There are more features for you to learn and utilize if you are interested, check out the official documentation Here.

Language

This folder allows you to create and organize text in a specific language. You can create files and folders for your desired language into this folder and use them in your project. All you need to do use the language helper and libraries accordingly.

Libraries

The \application\library\ folder hosts your custom libraries. Lets say you are tired of implementing the “date” features over and over in your projects. Reinventing the wheel in other words. All you need to do is simply create a library and simply carry it throughout the projects.

The libraries can call models too. Roughly, libraries are similar to controllers.

Logs

Your application can be configured to store status messages such as errors, exception handling messages or your custom log messages. These get stored in this folder. This is a very helpful feature. If you have an error that is hard to understand, take a look at the logs here in this folder. The logs need to be turned on by modifying the “www.yourapp.com\index.php” file. Note that there are different levels of logging available for you to set.

Models

Simply put, “Models” allow you to perform database queries. The controller requests the model to perform database queries, upon completion, the model (if programmed) will send the response data back to the controller and the controller may use it however we desire it.

Third Party

Many times, if you download some third party plugin for usage with CodeIgniter, its core files will be put in this folder. It is well known that CodeIgniter is flexible enough for almost every 3rd party plugin to be set up in its environment without a hassle.

Views

All your web design elements come here. You can keep the assets out of here, but the html code goes in here as “.php” files. The controller can call views. For example, a chat bubble can be made using a view and called on demand by the controller to be shown/overlaid in a different view. Moreover, It is possible to create a control panel separately and its sub pages separately in different views. This helps us in minimizing code drastically, thanks to CodeIgniter.


In the next tutorials, I will get started with teaching you how to program in CodeIgniter 3. Let me know in comments if you need a better explanation of a folder. Don’t forget to share :D. Thanks for reading. I hope it helped.

Back to CodeIgniter Tutorials

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 – Autocomplete in Sublime Text

Back to CodeIgniter Tutorials

Sublime text is a powerfully simple text editor that makes coding part of the development easier than it once was. Autocomplete for PHP, HTML, CSS Javascript is handled easily by Sublime text. But as I am writing, there is no native support for Codeigniter.

Do you have to manually type the following lines all the time?

If you suddenly can’t remember the name of a library or you have just started learning Codeigniter and want to explore all commands, you might probably have to find an IDE with autocomplete facility.

Fortunately for us, there is an amazing package for sublime text that allows Autocomplete. In this post, I will show you how to set up Sublime Text to have autocomplete facility for Codeigniter.

  1. Download Sublime Text 2 Completions for CodeIgniter and Unzip.
  2. There will be a file named PHP-codeigniter.sublime-completions.
    You will have to copy this file to two locations (to be sure). One is the sublime packages folder and the other is as according to the Github page.
  3. First, open sublime text and go to Browse Packages as shown below:
    Sublime text browse packages
    Sublime text browse packages

    A folder with the following path will open:

    C:\Users\USERNAME\AppData\Roaming\Sublime Text 3\Packages

    or simply

    …\Sublime Text (n)\Packages

  4. Copy the (PHP-codeigniter.sublime-completions) file and paste the following folder which you can find using:

    ..\Sublime Text (n)\Packages\User

Next, open up Sublime Text and you will be able to use Autocomplete. for example, see the following image.

CodeIgnoter Autocomplete
CodeIgniter Autocomplete

That’s it! You now have autocomplete facility within Sublime Text. Please note that with changes to codeigniter in future, this post might become obsolete. If for some reason, it does not work, then let me know in comments.

I hope this guide helped you.

Please Share and Comment

Back to CodeIgniter Tutorials

Codeigniter 2.20 – Uploading files to a folder and Inserting in Database table

Back to CodeIgniter Tutorials

In this tutorial, I am going to show how to upload multiple files into a folder and insert its name in a database table. In an application, we may either have to upload a single or multiple files. Take freelancer.com portfolio page for instance. They allow freelancers to upload multiple files for the same portfolio item. So our goal here is the same. The goals are:

  1. Take one or multiple files as an input.
  2. Once submit is pressed, the file is uploaded.
  3. When the file is uploaded, an its name is inserted in the database table.

In order to understand this tutorial, you must know how to install, and use codeigniter. Follow the following links if you want to learn these steps.

Now lets begin!

In order to upload a file to a folder, first a view is built that takes File as an input and has a submit button. I am using a controller named c_upload and my view is v_uploader

VIEW: v_uploader

I am taking multiple files as an input.

If you wish to upload a single file, then all you need to do is to remove the “multiple” keyword in line 5. Here is the code.

 

CONTROLLER: c_upload

From view, I am calling a function called do_upload(). I also have another function set_upload_options().

Load these helpers

Load these libraries

Load this model

Finally, here are the functions

Note: In set_upload_options() function, you can configure upload path

Now the Model code

These are the steps explaining the program.

Back to CodeIgniter Tutorials

Hybirdigniter config file (hybridauthlib.php) guide

Hybrdigniter is an integration of HybridAuth and CodeIgniter. In this sub-tutorial, I am going to explain the usage of /applicaion/config/hybridauthlib.php which is found in the installation of HybridIgniter.

Get HybridIgniter-master

Complete Tutorial : Social media login setup in Codeigniter Site using Hybridigniter

The complete File

[expand]

 

[/expand]

Enable or Disable a social media service

This feature allows you to Enable or Disable social media services. For example, if I wish to disable twitter, then I will do the following:
FROM

To

Add Social Media Developer “key”/”id” and “secret”

The config file also allows you to add developer app specific key/id and secret code in the config file that allows integration for that specific app.

For example, look at the highlighted lines below:

Understand this to avoid “providers” variable error

While developing, you might happen to see an error saying that the $providers variable is not defined. Well, please understand that this is where the providers array is. This will expand to the Controller and then lead to the View.

I hope this helps. The tutorial in future will continue HERE

Please do share this blog post and do comment if you liked this guide.

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