GN Cab Management – Ionic Cab Booking, Taxi Booking Android & iPhone App, PHP Codeigniter

Introduction

Welcome to the GN Cab Management tutorial for Ionic Cab Booking, Taxi Booking Android & iPhone App, and PHP Codeigniter. In this comprehensive guide, we will take you through the steps of setting up and customizing the app, from configuring the PHP Codeigniter backend to integrating it with the Ionic frontend. This tutorial is designed to help developers and entrepreneurs alike build a robust and feature-rich taxi booking app.

Tutorial

Step 1: Setting up the PHP Codeigniter Backend

Before we start with the tutorial, make sure you have the following prerequisites installed and configured on your development environment:

• PHP 5.6 or later
• Codeigniter 3.x or later
• MySQL or your preferred database management system

Once you have set up the Codeigniter environment, navigate to the "systemapplicationcontrollers" folder and create a new folder called "cabmanagement". Inside the "cabmanagement" folder, create the following files:

• "cab_model.php" for database interaction
• "cab.php" for controlling the Cab Management functionality

Here is an example code snippet to get you started with "cab_model.php":

<?php

class Cab_model extends CI_Model {

    function get_cabs() {
        $this->db->select('cab_id, cab_name, cab_latitude, cab_longitude, cab_price');
        $this->db->from('cab');
        $query = $this->db->get();
        return $query->result();
    }

    function add_new_cab($data) {
        $this->db->insert('cab', $data);
        return $this->db->insert_id();
    }

    function update_cab($data) {
        $this->db->update('cab', $data);
    }

    function delete_cab($cab_id) {
        $this->db->where('cab_id', $cab_id);
        $this->db->delete('cab');
    }

}

?>

Step 2: Creating the Ionic App

Create a new Ionic project using the command ionic start gn-cab-management tabs. Navigate to the project directory and create the following folders and files:

• "app/components": for building UI components
• "app/services": for providing business logic services
• "app/controllers": for managing app navigation
• "app/config.json": for configuring app settings

In the "app/config.json" file, add the following configuration settings:

{
  "name": "GN Cab Management",
  "title": "GN Cab Booking",
  "mode": "debug",
  "tabs": true,
  "version": "1.0",
  "api": "http://localhost/gncab-management/api/"
}

Step 3: Integrating the PHP Codeigniter Backend with Ionic App

Create a new file "cab.service.ts" in the "app/services" folder to make API calls to the PHP Codeigniter backend. Here is an example code snippet to get you started:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';

@Injectable()
export class CabService {

  private api = this.config.api;

  constructor(private http: Http) { }

  getCabs() {
    return this.http.get(`${this.api}/cabmanagement/get_cabs`);
  }

  addNewCab(cabData) {
    return this.http.post(`${this.api}/cabmanagement/add_new_cab`, cabData);
  }

  updateCab(cabData) {
    return this.http.put(`${this.api}/cabmanagement/update_cab`, cabData);
  }

  deleteCab(cabId) {
    return this.http.delete(`${this.api}/cabmanagement/delete_cab/${cabId}`);
  }

}

Step 4: Building the Ionic App

Create a new file "cab.page.html" in the "app/pages" folder to design the app UI. Here is an example code snippet to get you started:

<ion-header>
  <ion-navbar color="primary">
    <ion-title>GN Cab Booking</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let cab of cabs" [innerHTML]="cab.cab_name">
      {{ cab.cab_price }} / hr
    </ion-item>
  </ion-list>
  <button ion-button (click)="addNewCab()">Add New Cab</button>
  <button ion-button (click)="updateCab()">Update Cab</button>
  <button ion-button (click)="deleteCab()">Delete Cab</button>
</ion-content>

In the "cab.page.ts" file, inject the CabService and make API calls to retrieve, add, update, and delete cabs:

import { Component } from '@angular/core';
import { CabService } from '../services/cab.service';

@Component({
  selector: 'page-cab',
  templateUrl: 'cab.page.html',
  providers: [CabService]
})
export class CabPage {

  cabs = [];

  constructor(private cabService: CabService) { }

  async ionViewWillEnter() {
    this.cabs = await this.cabService.getCabs();
  }

  addNewCab() {
    const newCabData = { name: 'New Cab', price: 20.00 };
    this.cabService.addNewCab(newCabData);
    this.ionViewWillEnter();
  }

  updateCab() {
    const updateCabData = { name: 'Update Cab', price: 25.00 };
    this.cabService.updateCab(updateCabData);
    this.ionViewWillEnter();
  }

  deleteCab() {
    const cabId = 1;
    this.cabService.deleteCab(cabId);
    this.ionViewWillEnter();
  }

}

That's it! With this comprehensive guide, you have successfully integrated the PHP Codeigniter backend with the Ionic app and built a functional cab booking app. You can now customize and extend the app to fit your specific requirements. Happy coding!