Angular tutorial with CodeIgniter RESTful API – part 1

Spread the love

Angular tutorial with CodeIgniter and MySQL

Now a days modern JavaScript frameworks like Angular, Reactjs and Vuejs are widely used by developers. With these frameworks, server side languages like php, python and ASP.NET are very popular among developers. In this two part Angular tutorial with CodeIgniter RESTful API, we will work in CodeIgniter RESTful API. We will use CodeIgniter 4 with latest Angular version in this article.

To complete this tutorial following task are performed

1. Create MySQL Database

2. Create CodeIgniter RESTful API

3. Angular application to access the REST API and perform CRUD operations

codeigniter restful api with angualr crud part -1

Demo of Angular tutorial with CodeIgniter

  • We will create a CRUD project for two entities “classes and students”.
  • Every “class”  has many “students”.

Angular Application Classes List

 

Angular framework tutorial with CodeIgniter - Class listing

Angular CRUD tutorial with CodeIgniter PI - Students listing

CodeIgniter RESTful API

To create a RESTful API using CodeIgniter framework. Install CodeIgniter either manual or using composer. To install composer, visit the composer download page. CodeIgniter installation instructions are found on this page.

Open command line and go to WWW or htdocs folder of WAMP or XAMPP installation.

Create project directory

Open WWW folder of WAMP and create a directory ng_ci_app. 

Create CodeIgniter 4 project

Open ng_ci_app directory. Run the command below to setup and create an API for Angular tutorial with CodeIgniter app.

> composer create-project codeigniter4/appstarter backend

The command above will create a “backend” folder.

Project Directory Structure

Directories in your project after set up:

  • app
  • public
  • tests
  • writable
  • vendor/codeigniter4/framework/system
  • vendor/codeigniter4/framework/app & public

Local Development Server

To run the CodeIgniter local server, Run the command below on command line

php spark serve

Open browser and type the URL below.

http://localhost:8080

Create a Database for Angular CRUD tutorial

Open phpMyAdmin or any other Database Management Software.

Create a Database named db_ci_ng. We will create the Students and Classes table using CodeIgniter Migrations.

Add database credentials to the App\Config\Database.php

public $default = [
       'DSN'      => '',
       'hostname' => 'localhost',
       'username' => 'root',
       'password' => '',
       'database' => 'db_ci_ng',
       'DBDriver' => 'MySQLi',

Create models for Angular CRUD API with CodeIgniter

CodeIgniter models are stored in app/Models directory.

Add Classes Model

Create a file Classes.php inside models directory and add code below into it.

<?php

namespace App\Models;

use CodeIgniter\Model;
use Exception;

class Classes extends Model
{
    protected $DBGroup              = 'default';
    protected $table                = 'classes';
    protected $primaryKey           = 'id';
    protected $useAutoIncrement     = true;
    protected $insertID             = 0;
    protected $returnType           = 'array';
    protected $useSoftDeletes       = false;
    protected $protectFields        = true;
    protected $allowedFields        = ['code', 'status', 'name', 'maximum_students', 'description'];

    // Dates
    protected $useTimestamps        = false;
    protected $dateFormat           = 'datetime';
    protected $createdField         = 'created_at';
    protected $updatedField         = 'updated_at';
    protected $deletedField         = 'deleted_at';

    // Validation
    protected $validationRules      = [];
    protected $validationMessages   = [];
    protected $skipValidation       = false;
    protected $cleanValidationRules = true;

    public function findClassById(string $id)
    {
        $class = $this
            ->asArray()
            ->where(['id' => $id])
            ->first();

        if (!$class) 
            throw new Exception('Class does not exist for specified ID');

        return $class;
    }

}

The $table, $primaryKey, $allowedFields and other properties are defined. findClassById method is defined. This method accepts $id parameter and returns a class data.

Add Student model

Create a class Student.php in app\Models. Add code below into the file.

<?php

namespace App\Models;

use CodeIgniter\Model;
use Exception;

class Student extends Model
{
    protected $DBGroup              = 'default';
    protected $table                = 'students';
    protected $primaryKey           = 'id';
    protected $useAutoIncrement     = true;
    protected $insertID             = 0;
    protected $returnType           = 'array';
    protected $useSoftDeletes       = false;
    protected $protectFields        = true;
    protected $allowedFields        = 
        [
            "first_name",
            "last_name",
            "class_id",
            "date_of_birth"
        ];

    // Dates
    protected $useTimestamps        = false;
    protected $dateFormat           = 'datetime';
    protected $createdField         = 'created_at';
    protected $updatedField         = 'updated_at';
    protected $deletedField         = 'deleted_at';

    // Validation
    protected $validationRules      = [];
    protected $validationMessages   = [];
    protected $skipValidation       = false;
    protected $cleanValidationRules = true;

    public function findStudentById($id)
    {   
        $student = $this
            ->select('s.*, c.name as class_name')
            ->from('students s')
            ->where(['s.id' => $id])
            ->join('classes c', 'c.id = s.class_id', 'left')
            ->asArray()->first();

        if (!$student) throw new Exception('Could not find student for specified ID');

        return $student;
    }
}

This class also defines the $table, $id, $allowedFields properties with other properties. findStudentById method is defined and $id parameter is passed. The Query in this method selects Student record with left Join with classes table to select the class name of student.

Create Database Migrations

CodeIgniter 4 provides migrations like other PHP MVC frameworks.

Create Classes table migration

To create a class table migration, execute the command below

php spark migrate:create AddClass

This command will add a Migration class, AddClass. This class have two methods. Up and Down.  Up method is used for create table command. While down method is used for dropping the table

Add the code below to the Up method. This code adds the columns required for the Classes table.

<?php

namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class AddClass extends Migration
{
    public function up()
    {
        $this->forge->addField([
            'id' => [
                'type' => 'INT',
                'constraint' => 11,
                'unsigned' => true,
                'auto_increment' => true,
            ],
            'code' => [
                'type' => 'VARCHAR',
                'constraint' => '50',
                'null' => false
            ],
            'status' => [
                'type' => 'ENUM("opened","closed")',
                'default' => 'opened',
                'null' => false
            ],
            'name' => [
                'type' => 'VARCHAR',
                'constraint' => '255',
                'null' => false,
                'unique' => true
            ],
            'maximum_students' => [
                'type' => 'TINYINT',
                'constraint' => 2,
                'null' => false
            ],
            'description' => [
                'type' => 'TEXT',
                'null' => true,            
            ],
            'created_date datetime default current_timestamp',
            'updated_date datetime default current_timestamp on update current_timestamp', 
        ]);
        $this->forge->addPrimaryKey('id');
        $this->forge->createTable('classes');
    }

    public function down()
    {
        $this->forge->dropTable('classes');
    }
}

Down method in migration

Down method is used to add command to drop a table, in case of a migration rollback command is run.

public function down()
   {
       $this->forge->dropTable('classes');
   }

Add Student Migration

To add student table migration, run the command below.

php spark migrate:create AddStudent

Add the code below to up method.

$this->forge->addField([
           'id' => [
               'type' => 'INT',
               'constraint' => 11,
               'unsigned' => true,
               'auto_increment' => true,
           ],
           'first_name' => [
               'type' => 'VARCHAR',
               'constraint' => '255',
               'null' => false
           ],
           'last_name' => [
               'type' => 'VARCHAR',
               'constraint' => '255',
               'null' => false
           ],
           'date_of_birth' => [
               'type' => 'date',
               'null' => false
           ],
           'class_id' => [
               'type' => 'INT',
               'constraint' => '11',
               'unsigned' => TRUE
           ],
           'created_at datetime default current_timestamp',
           'updated_at datetime default current_timestamp on update current_timestamp', 
       ]);
       
       $this->forge->addPrimaryKey('id');
       $this->forge->addForeignKey('class_id', 'classes', 'id','CASCADE','CASCADE');
       $this->forge->createTable('students');

The basic information fields for a student are add with class_id field, class_id field is foreign key to the student table. Foreign key class_id is added using addForeignKey method.

Run all migrations

On command line run the command below. This command will create the Classes and Student table in database.

php spark migrate

Open the project directory inside your favorite IDE like Visual Studio Code.

Create Class and Students Controllers

Open backend directory. Open Controllers directory inside app directory.

Create BaseController.php file

Create a new file BaseController.php and add the code below

<?php

namespace App\Controllers;

use CodeIgniter\Config\Services;
use CodeIgniter\Controller;
use CodeIgniter\HTTP\CLIRequest;
use CodeIgniter\HTTP\IncomingRequest;
use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\HTTP\ResponseInterface;
use CodeIgniter\Validation\Exceptions\ValidationException;
use Psr\Log\LoggerInterface;

/**
 * Class BaseController
 *
 * BaseController provides a convenient place for loading components
 * and performing functions that are needed by all your controllers.
 * Extend this class in any new controllers:
 *     class Home extends BaseController
 *
 * For security be sure to declare any new methods as protected or private.
 */
class BaseController extends Controller
{
    /**
     * Instance of the main Request object.
     *
     * @var CLIRequest|IncomingRequest
     */
    protected $request;

    /**
     * An array of helpers to be loaded automatically upon
     * class instantiation. These helpers will be available
     * to all other controllers that extend BaseController.
     *
     * @var array
     */
    protected $helpers = [];

    /**
     * Constructor.
     */
    public function initController(RequestInterface $request, ResponseInterface $response, LoggerInterface $logger)
    {
        // Do Not Edit This Line
        parent::initController($request, $response, $logger);

        // Preload any models, libraries, etc, here.

        // E.g.: $this->session = \Config\Services::session();
    }

    public function getResponse(array $responseBody, int $code = ResponseInterface::HTTP_OK) {
        return $this
            ->response
            ->setStatusCode($code)
            ->setJSON($responseBody);
    }

    public function getRequestInput(IncomingRequest $request){
        $input = $request->getPost();
        
        if (empty($input)) {
            //convert request body to associative array
            $input = json_decode($request->getBody(), true);
        }
        return $input;
    }

    public function validateRequest($input, array $rules, array $messages =[]){
        $this->validator = Services::Validation()->setRules($rules);
        // If you replace the $rules array with the name of the group
        if (is_string($rules)) {
            $validation = config('Validation');
    
            // If the rule wasn't found in the \Config\Validation, we
            // should throw an exception so the developer can find it.
            if (!isset($validation->$rules)) {
                throw ValidationException::forRuleNotFound($rules);
            }
    
            // If no error message is defined, use the error message in the Config\Validation file
            if (!$messages) {
                $errorName = $rules . '_errors';
                $messages = $validation->$errorName ?? [];
            }
    
            $rules = $validation->$rules;
        }
        return $this->validator->setRules($rules, $messages)->run($input);
    }    
}

This file serves as base for the RESTful APIs.

Create a Classes Controller REST API

Create a file Classes.php inside controllers directory. Following Rest API methods are added to the file.

Add classes listing method index()

  • Index method returns all the classes by using $model->findall() method.

Add new class create method using Store method

  • The store method is used to add a new class to the Classes database table. Validation rules like required, Unique and Integer are defined.
  • Classes Model object is created using new Model method. The class data is saved using $model’s save method. and newly created class is returned to the client.

Add show method to view students of a class

  • To view a class students, add show() method. This method accepts an $id parameter and fetches the students enrolled in a class.

Add update class method

  • To update a class, add update method. It will update the existing class and save it.

Delete a class method

  • In order to delete a class, pass $id parameter and delete the class using $model’s delete method.
<?php

namespace App\Controllers;

use App\Controllers\BaseController;
use App\Models\Classes as ClassModel;
use App\Models\Student;
use CodeIgniter\HTTP\ResponseInterface;
use Exception;

class Classes extends BaseController
{
    /*
    * Get all Classes
    * @return Response
    */
   public function index()
   {
        $model = new ClassModel();

        return $this->getResponse(
            [
                'message' => 'Classes retrieved successfully',
                'classes' => $model->findAll()
            ]
        );
   }

   /**
    * Create a new Class
    */
   public function store()
   {
        $rules = [
            'name' => 'required',
            'code' => 'required|is_unique[classes.code]',
            'status' => 'required|in_list[opened, closed]',
            'maximum_students' => 'required|integer'
        ];
        $input = $this->getRequestInput($this->request);

        if(!$this->validateRequest($input, $rules)) {
            return $this
                ->getResponse(
                    $this->validator->getErrors(),
                    ResponseInterface::HTTP_BAD_REQUEST
            );
        }

        $code = $input['code'];

        $model = new ClassModel();
        $model->save($input);
        $class = $model->where('code', $code)->first();

        return $this->getResponse(
            [
                'message' => 'Class added successfully',
                'class' => $class
            ]
        );
   }

   /**
    * Get a single class by CODE
    */
   public function show($id)
   {
       try {
           $model = new ClassModel();
           $studentModel = new Student();
           $class = $model->findClassById($id);
           $class['students'] = $studentModel->where(['class_id' => $class['id']])->findAll(); 

           return $this->getResponse(
               [
                   'message' => 'Class retrieved successfully',
                   'class' => $class
               ]
           );
       } catch (Exception $e) {
           return $this->getResponse(
               [
                   'message' => 'Could not find class for specified ID',
                   'error' => $e->getMessage()
               ],
               ResponseInterface::HTTP_NOT_FOUND
           );
       }
   }

   /**
    * Update a Class
    */
   public function update($id)
   {
       try {
            $model = new ClassModel();
            $input = $this->getRequestInput($this->request);
            $model->update($id, $input);
            $class = $model->findClassById($id);

            return $this->getResponse(
                [
                    'message' => 'Class updated successfully',
                    'client' => $class
                ]
            );
       } catch (Exception $exception) {
           return $this->getResponse(
               [
                   'message' => $exception->getMessage()
               ],
               ResponseInterface::HTTP_NOT_FOUND
           );
       }
   }

   /**
    * Delete a Class
    */
   public function destroy($id)
   {
        try {
            $model = new ClassModel();
            $client = $model->findClassById($id);
            $model->delete($client);

            return $this
                ->getResponse(
                    [
                        'message' => 'Class deleted successfully',
                    ]
                );
        } catch (Exception $exception) {
            return $this->getResponse(
                [
                    'message' => $exception->getMessage()
                ],
                ResponseInterface::HTTP_NOT_FOUND
            );
        }
   }
}

Add a Students Controller RESTful API

  • Add a new controller Students.php in Controllers directory.

Index method for listing of students

  • Index method is used to display list of students.

Store method to add new Student method

  • To store a new student add store method.

Show method to display details of student

  • To view a students detail add show method.

Update method to edit the student details

  • To update the student details, update method is used.

Delete method to remove a student record

  • In order to remove a student record, delete method is used.
<?php

namespace App\Controllers;

use App\Controllers\BaseController;
use App\Models\Student;
use CodeIgniter\HTTP\ResponseInterface;
use Exception;

/**
 * students controller CRUD
 */
class Students extends BaseController
{
    public function index()
    {
        $model = new Student();

        return $this->getResponse(
            [
                'message' => 'Students retrieved successfully',
                'students' => $model->findAll()
            ]
        );
    }

    /**
    * Create a new Student
    */
   public function store()
   {
        $rules = [
            'first_name' => 'required',
            'last_name' => 'required',
            'date_of_birth' => 'required|valid_date',
            'class_id' => 'required|integer'
        ];
        $input = $this->getRequestInput($this->request);

        if(!$this->validateRequest($input, $rules)) {
            return $this
                ->getResponse(
                    $this->validator->getErrors(),
                    ResponseInterface::HTTP_BAD_REQUEST
            );
        }

        $model = new Student();
        $model->save($input);

        return $this->getResponse(
            [
                'message' => 'Student added successfully',
                'class' => $model
            ]
        );
   }

    /**
    * Get a single class by CODE
    */
    public function show($id)
    {
        try {
            $model = new Student();
            $student = $model->findStudentById($id);
 
            return $this->getResponse(
                [
                    'message' => 'Student retrieved successfully',
                    'student' => $student
                ]
            );
        } catch (Exception $e) {
            return $this->getResponse(
                [
                    'message' => 'Could not find student for specified ID',
                    'error' => $e->getMessage()
                ],
                ResponseInterface::HTTP_NOT_FOUND
            );
        }
    }
    /**
    * Update a Student
    */
   public function update($id)
   {
       try {
            $model = new Student();
            $model->findStudentById($id);

            $input = $this->getRequestInput($this->request);
            $model->update($id, $input);
            $student = $model->findStudentById($id);

            return $this->getResponse(
                [
                    'message' => 'Student updated successfully',
                    'student' => $student
                ]
            );
       } catch (Exception $exception) {
           return $this->getResponse(
               [
                   'message' => $exception->getMessage()
               ],
               ResponseInterface::HTTP_NOT_FOUND
           );
       }
   }

   /**
    * Delete a Class
    */
    public function destroy($id)
    {
         try {
             $model = new Student();
             $student = $model->findStudentById($id);
             $model->delete($student);
 
             return $this
                 ->getResponse(
                     [
                         'message' => 'Student deleted successfully',
                     ]
                 );
         } catch (Exception $exception) {
             return $this->getResponse(
                 [
                     'message' => $exception->getMessage()
                 ],
                 ResponseInterface::HTTP_NOT_FOUND
             );
         }
    }
}

Running and Testing the API

To run and test the API, Install Postman. Postman is used to test APIs.  Once installed, open the Postman application. There are two CRUD API endpoints.

  • Classes
  • Students

Get All Classes

Select GET in methods drop down, add URL

  • Open a new tab
  • Select HTTP method GET
  • Add URL below in postman URL bar
  • http://localhost:8080/class
  • In address bar and click Send button
  • The API displays, the results returned from API

Angular framework CRUD tutorial with CodeIgniter - get records

 

CodeIgniter restful api - get records

Add a new class

To create a new class

  • Open a new tab
  • Select HTTP method POST
  • Add URL below in postman URL
  • http://localhost:8080/class
  • Select Body option
  • Click on raw
  • In last drop down select JSON
  • Add the JSON below to the body section
{
 "code" : "web-devleopment-php-mysql",
  "status": "opened",
  "name": "Web Devleopment using PHP & MySQL",
  "maximum_students": 15,
  "description": "This course will be an all in one solution that helps you to learn how to create a web applications using PHP and MySQL"
}

Click send button. Success message is displayed with newly created record in database.

CodeIgniter restful api - add new class

Fetch a class detail

To get a class details.

  • Open a new tab
  • Select HTTP method GET
  • Add URL below in postman URL bar
  • http://localhost:8080/class/1
  • Click on Send button.
  • The class details are returned as JSON

Angular tutorial with CodeIgniter - get single class record

Update a class

To update a class details.

  • Open a new tab
  • Select HTTP method PUT
  • Add URL below in postman URL
  • http://localhost:8080/class/1
  • Select Body option
  • Click on raw
  • In last drop down select JSON
  • Add the JSON below to the body section
  • Click Send button
  • The updated record JSON is returned
{
  "code" : "web-devleopment-php-mysql",
  "status": "opened",
  "name": "Web Devleopment using PHP, MySQL, CodeIgniter and jQuery",
  "maximum_students": 10,
  "description": "This course you will learn how to create a web applications using PHP and MySQL"
}

CodeIgniter restful api - Update a class record

Delete a class

To delete a class

  • Open another tab
  • Select HTTP method DELETE
  • Add URL below in postman URL
  • http://localhost:8080/class/1
  • Click Send button
  • The record is deleted

CodeIgniter restful api - Delete a class record

Students API

Let’s create Students CRUD API.

Get All Students

Select GET in methods drop down, Add URL

  • Open a new tab
  • Select HTTP method GET
  • Add URL below in postman URL bar
  • http://localhost:8080/students
  • In address bar and click Send button
  • The API displays, the results returned from API

Angular tutorial with CodeIgniter RESTful API - All students record

Add a new student

To create a new student.

  • Open a new tab
  • Select HTTP method POST
  • Add URL below in postman URL
  • http://localhost:8080/students
  • Select Body option
  • Click on raw
  • In last drop down select JSON
  • Add the JSON below to the body section
{
    "first_name": "Test",
    "last_name": "Student",
    "date_of_birth": "2002-12-15",
    "class_id": 10
}

Angular tutorial with CodeIgniter api - add a student record

Fetch a student detail

To get a student details.

  • Open a new tab
  • Select HTTP method GET
  • Add URL below in postman URL bar
  • http://localhost:8080/students/1
  • Click on Send button.
  • The class details are returned as JSON

Angular tutorial with CodeIgniter - fetch a student record

Update a student

To update a student details.

  • Open a new tab
  • Select HTTP method PUT
  • Add URL below in postman URL
  • http://localhost:8080/students/1
  • Select Body option
  • Click on raw
  • In last drop down select JSON
  • Add the JSON below to the body section
  • Click Send button
  • The updated record JSON is returned
{
    "first_name": "First Name",
    "last_name": "Last name",
    "date_of_birth": "2002-12-15",
    "class_id": 10
}

codeigniter restful api - update a student record

Delete a student

To delete a student.

  • Open another tab
  • Select HTTP method DELETE
  • Add URL below in postman URL
  • http://localhost:8080/students/1
  • Click Send button
  • The record is deleted

CodeIgniter restful api - delete a student

Conclusion

In this tutorial you have developed a CodeIgniter 4 API, In next part Angular application will be created tat will consume the API endpoints.

Source Code of project

Source code of project can be cloned or downloaded from GitHub repository.

angular CRUD using CodeIgniter RESTful api - Source code

Top Rated Courses

To learn CodeIgniter and Angular you can learn from following best seller courses.

CodeIgniter 4: Build a Complete Web Application from Scratch

Learn how to build fully-featured web applications with the most popular lightweight PHP MVC framework

                                                                                                           

Angular – The Complete Guide (2022 Edition)

Master Angular 13 (formerly “Angular 2”) and build awesome, reactive web apps with the successor of Angular. js

Previous Tutorial:

Next Tutorial:

Related Tutorials:

 

 

Check Also

pagination in php and mysql

Pagination in php and MySQL tutorial

Spread the loveLast updated:1st May, 2022Pagination in php and MySQL Pagination is a valuable skill …