47 CREATING CI4 PROJECT <?php namespace App\Controllers; use App\Models\ProductModel; use App\Controllers\BaseController; class ProductController extends BaseController { public function index() { $productModel = new ProductModel(); $products = $productModel->paginate(5); $pager = $productModel->pager; $data = [ 'products' => $products, 'pager' => $pager ]; return view('product/index', $data); } public function create() { return view('product/create'); } public function store() { $productModel = new ProductModel(); $productModel->insert($this->request->getPost()); return redirect()->route('/')->with('success', 'Product created successfully.'); } public function show($id) { $productModel = new ProductModel(); $product = $productModel->find($id); return view('product/show', ['product' => $product]); } You overall code should look like this:
CREATING CI4 PROJECT 48 public function edit($id) { $productModel = new ProductModel(); $product = $productModel->find($id); return view('product/edit', ['product' => $product]); } public function update($id) { $productModel = new ProductModel(); $data = [ 'name' => $this->request->getPost('name'), 'detail' => $this->request->getPost('detail'), ]; $productModel->update($id, $data); return redirect()->route('/')->with('success', 'Product updated successfully'); } public function destroy($id) { $productModel = new ProductModel(); $product = $productModel->find($id); if (!$product) { return redirect()->route('/')->with('error', 'Product not found'); } $productModel->delete($id); return redirect()->route('/')->with('success', 'Product deleted successfully'); } }
49 CREATING CI4 PROJECT STEP 6: ADD RESOURCE ROUTE A resource route in CodeIgniter 4 simplifies the creation of routes for CRUD operations on a resource. It automatically generates routes for actions like creating, reading, updating, and deleting records, reducing the need for manual route declarations. Open your “app/Config/Routes.php” file and add the following route. use App\Controllers\ProductController; $routes->get('/', [ProductController::class, 'index']); $routes->get('/show/(:any)', [ProductController::class, 'show/$1']); $routes->get('/create', [ProductController::class, 'create']); $routes->post('/store', [ProductController::class, 'store']); $routes->get('/edit/(:any)', [ProductController::class, 'edit/$1']); $routes->post('/update/(:any)',[ProductController::class, 'update/$1']); $routes->get('/destroy/(:any)',[ProductController::class, 'destroy/$1']);
50 CREATING CI4 PROJECT STEP 7: VIEWS In CodeIgniter 4, Views are PHP files stored in the app/Views directory that contain HTML markup mixed with PHP code. They are responsible for rendering the HTML content that is sent to the client's browser, allowing you to separate presentation logic from the application's business logic. Views can be loaded and data can be passed to them from controllers using the view() method. In app/Views/ directory create a new folder called 'product'. Inside the product folder, create several files that will act as our pages on the website. Right-click on the product folder and select "Create New File."
51 CREATING CI4 PROJECT Rename the file as specified below, repeat these steps until you have all the 5 views files ('layout.php', 'index.php', 'create.php', 'edit.php', 'show.php'). After you have created all of the files. Write the codes inside those files as specified below: app/Views/product/layout.php: <!DOCTYPE html> <html> <head> <title>CI 4 CRUD Tutorial</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitterbootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"> </head> <body> <div class="container"> <?= $this->renderSection('content'); ?> </div> </body> </html>
CREATING CI4 PROJECT 52 app/Views/product/index.php: <?= $this->extend('product/layout'); ?> <?= $this->section('content'); ?> <div class="row"> <div class="col-lg-12 margin-tb"> <div class="pull-left"> <h2>CI 4 CRUD Tutorial</h2> </div> <div class="pull-right"> <a class="btn btn-success" href="<?php echo site_url('/create'); ?>"> Create New Product</a> </div> </div> </div> <?php if ($message = session()->getFlashdata('success')) : ?> <div class="alert alert-success"> <p><?= $message ?></p> </div> <?php endif; ?> <table class="table table-bordered"> <tr> <th>No</th> <th>Name</th> <th>Details</th> <th width="280px">Action</th> </tr> <?php $i = 1; ?> <?php foreach ($products as $key => $product) : ?> <tr> <td><?= ++$i ?></td> <td><?= $product->name ?></td> <td><?= $product->detail ?></td> <td> <a class="btn btn-info" href="<?= base_url('show/' . $product->id); ?>">Show</a> <a class="btn btn-primary" href="<?= base_url('edit/' . $product->id); ?>">Edit</a> <a class="btn btn-danger" href="<?= base_url('destroy/' . $product->id); ?>">Delete</a> </td> </tr> <?php endforeach; ?> </table> <?= $this->endSection(); ?>
53 CREATING CI4 PROJECT app/Views/product/create.php: <?= $this->extend('product/layout'); ?> <?= $this->section('content'); ?> <div class="row"> <div class="col-lg-12 margin-tb"> <div class="pull-left"><h2>Add New Product</h2></div> <div class="pull-right"> <a class="btn btn-primary" href="<?= site_url('/') ?>"> Back</a> </div> </div> </div> <?php if (session()->has('errors')) : ?> <div class="alert alert-danger"> <strong>Whoops!</strong> There were some problems with your input.<br><br> <ul> <?php foreach (session('errors') as $error) : ?> <li><?= $error ?></li> <?php endforeach; ?> </ul> </div> <?php endif; ?> <form action="<?= site_url('store') ?>" method="POST"> <?= csrf_field() ?> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Name:</strong> <input type="text" name="name" class="form-control" placeholder="Name"> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Detail:</strong> <textarea class="form-control" style="height:150px" name="detail" placeholder="Detail"></textarea> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12 text-center"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </form> <?= $this->endSection(); ?>
CREATING CI4 PROJECT 54 app/Views/product/edit.php: <?= $this->extend('product/layout'); ?> <?= $this->section('content'); ?> <div class="row"> <div class="col-lg-12 margin-tb"> <div class="pull-left"><h2>Edit Product</h2></div> <div class="pull-right"><a class="btn btn-primary" href="<?= route_to('/') ?>"> Back</a></div> </div> </div> <?php if (session()->has('errors')) : ?> <div class="alert alert-danger"> <strong>Whoops!</strong> There were some problems with your input.<br><br> <ul> <?php foreach (session('errors') as $error) : ?> <li><?= $error ?></li> <?php endforeach; ?> </ul> </div> <?php endif; ?> <form action="<?= site_url('update/' . $product->id) ?>" method="POST"> <?= csrf_field() ?> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Name:</strong> <input type="text" name="name" value="<?= $product->name ?>" class="form-control" placeholder="Name"> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Detail:</strong> <textarea class="form-control" style="height:150px" name="detail" placeholder="Detail"><?= $product->detail ?> </textarea> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12 text-center"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </form> <?= $this->endSection(); ?>
55 CREATING CI4 PROJECT app/Views/product/show.php: <?= $this->extend('product/layout'); ?> <?= $this->section('content'); ?> <div class="row"> <div class="col-lg-12 margin-tb"> <div class="pull-left"> <h2> Show Product</h2> </div> <div class="pull-right"> <a class="btn btn-primary" href="<?= route_to('/') ?>"> Back</a> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Name:</strong> <?= $product->name ?> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Details:</strong> <?= $product->detail ?> </div> </div> </div> <?= $this->endSection(); ?>
56 CREATING CI4 PROJECT STEP 8: RUN THE SERVER LOCALLY With all the hard work done for today, it is time to see the result of the website. Run the command below to start the server locally: php spark serve Your terminal will look like below: Copy the host address and paste it on your browser. You will see codeigniter 4 welcome page as below: Your codeigniter 4 CRUD project is ready. Try every functions and checkif any error occurs.