How to create and load view in CodeIgniter 4

In CodeIgniter view is an HTML or PHP file used to display the content on the browser.

You can load and pass data to view using the controller.

In this tutorial, I show how you can create and load view in CodeIgniter 4.

How to create and load view in CodeIgniter 4

Create CSS file
Create View
Load View
Route
Output
Conclusion

1. Create CSS file

Create a css folder at the project root public folder and create a style.css file.

Completed Code

body{
   background-color: whitesmoke;
}

h2{
   text-align: center;
}

table{
   margin: 0 auto;
}

2. Create View

Create a user_view.php file at app/Views/ folder.

Directly access the file stored in the public folder to include. To include style.css file stored in the public/ folder just pass the path.

The $content variable is initialized from the User controller $data Array.

Completed Code

<!doctype html>
<html>
<head>
   <title>Home Page</title>

   <!-- CSS file -->
   <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
   <h2><?= $content; ?></h2>
   <table>
     <tr>
        <td>Name : </td>
        <td><input type='text' /></td>
     </tr>
     <tr>
        <td>Username : </td>
        <td><input type='text' /></td>
     </tr>
     <tr>
        <td>Email : </td>
        <td><input type='text' /></td>
     </tr>
     <tr>
        <td>&nbsp;</td>
        <td><input type='button' value='Submit' /></td>
     </tr>
   </table>
</body>
</html>

3. Load View

Syntax –

To load view use return view().

return view('view-name',[Array]);

1st parameter is a view file name.
2nd parameter is optional. It is used to pass data to view file. It takes an Array.

NOTE – If view file stored in the sub-folder then access it like this – return view('subfolder1/viewname');.

Create Controller

Create UsersController Controller –

php spark make:controller UsersController

Open app/Controllers/UsersController.php file.

Create a single method –

index() – Load view using this method. With $data Array pass data to view.

$data['content'] = "Home Page";

In view file, it is accessed using $content.

Pass user_view view name and $data Array in return view().

NOTE – If you are using HTML file for view then you need mention view name with extension e.g. return view('user_view.html');.

Completed Code

<?php 
namespace App\Controllers;
use App\Controllers\BaseController;

class UsersController extends BaseController
{
   public function index() {
      $data['content'] = "Home Page";
      return view('user_view',$data);
   }
}

4. Route

Open app/Config/Routes.php file.

Update default controller to UsersController –

$routes->setDefaultController('User');

Replace the following route –

$routes->get('/', 'Home::index');

with this –

$routes->get('/', 'UsersController::index');

Here, UsersController is the controller name and index is the method name.

5. Output

Navigate to the project folder using CMD if you are on Windows or use the terminal if you are on Mac or Linux.

Execute the following command –

php spark serve

Run – http://localhost:8080/ in the browser. It will give the following output –

6. Conclusion

You can either use PHP or HTML file for view. Use the key name to access the passed Array value in the view file.

If you found this tutorial helpful then don't forget to share.

How to create and load view in CodeIgniter 4

Contents

1. Create CSS file

2. Create View

3. Load View

4. Route

5. Output

6. Conclusion

Leave a Comment Cancel reply