Build Your First Application

Overview

This tutorial is intended to introduce you to the CodeIgniter4 frameworkand the basic principles of MVC architecture. It will show you how abasic CodeIgniter application is constructed in a step-by-step fashion.

If you are not familiar with PHP, we recommend that you check outthe W3Schools PHP Tutorial before continuing.

In this tutorial, you will be creating a basic news application. Youwill begin by writing the code that can load static pages. Next, youwill create a news section that reads news items from a database.Finally, you’ll add a form to create news items in the database.

This tutorial will primarily focus on:

  • Model-View-Controller basics
  • Routing basics
  • Form validation
  • Performing basic database queries using CodeIgniter’s “Query Builder”

The entire tutorial is split up over several pages, each explaining asmall part of the functionality of the CodeIgniter framework. You’ll gothrough the following pages:

  • Introduction, this page, which gives you an overview of what toexpect and gets your default application downloaded and running.
  • Static pages, which will teach you the basicsof controllers, views and routing.
  • News section, where you’ll start using modelsand will be doing some basic database operations.
  • Create news items, which will introducemore advanced database operations and form validation.
  • Conclusion, which will give you some pointers onfurther reading and other resources.

Enjoy your exploration of the CodeIgniter framework.

Getting Up and Running

You can download a release manually from the site, but for this tutorial we willuse the recommended way and install the AppStarter package through Composer.From your command line type the following:

  1. ➜ composer create-project codeigniter4/appstarter ci-blog -s rc

This creates a new folder, ci-blog, which contains your application code, withCodeIgniter installed in the vendor folder.

By default, CodeIgniter starts up in production mode. This is a safety featureto keep your site a bit more secure in case settings are messed up once it is live.So first let’s fix that. Copy or renmae the env file to .env. Open it up.

This file contains server-specific settings. This means you never will need tocommit any sensitive information to your version control system. It includessome of the most common ones you want to enter already, though they are all commentedout. So uncomment the line with CI_ENVIRONMENT on it, and change production todevelopment:

  1. CI_ENVIRONMENT = development

With that out of the way it’s time to view your application in a browser. You canserve it through any server of your choice, Apache, Nginx, etc, but CodeIgnitercomes with a simple command that takes advantage of PHP’s built-in server to getyou up and running fast on your development machines. Type the following on thecommand line from the root of your project:

  1. php spark serve

The Welcome Page

Now point your browser to the correct URL you will be greeted by a welcome screen.Try it now by heading to the following URL:

  1. http://localhost:8080

and you should be greeted by the following page:../_images/welcome1.pngThis means that your application works and you can start making changes to it.

Debugging

Now that you’re in development mode, you’ll see a toolbar on the bottom of your application.This toolbar contains a number of helpful items that you can reference during development.This will never show in production environments. Clicking any of the tabs along the bottombrings up additional information. Clicking the X on the right of the toolbar minimizes itto a small square with the CodeIgniter flame on it. If you click that the toolbarwill show again.

In addition to this, CodeIgniter has some helpful error pages when you hit exceptions orother errors in your program. Open up app/Controllers/Home.php and change some lineto generate an error (removing a semi-colon or brace should do the trick!). You will begreeted by a screen looking something like this:../_images/error.pngThere are a couple of things to note here:

  1. Hovering over the red header at the top reveals a search link that will open upGoogle.com in a new tab and searching for the exception.2. Clicking the arguments link on any line in the Backtrace will expand a list ofthe arguments that were passed into that function call.

Everything else should be clear when you see it.

Now that we know how to get started and how to debug a little, let’s get started building thissmall news application.