Saturday, July 13, 2024

CodeIgniter - post form

Assuming we already have CodeIgniter installed. We make a controller:

 php spark make:controller Post --suffix

Then we create the HTML template ./app/Views/posts.php and add the content:

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
  
  
<form action="<?= site_url('post') ?>" method="post">

<p>Name: <?php echo $name ?></p>
<p>Email: <?php echo $email ?></p>
<br>
<p>Unesi podatke: </p>
<input type="text" name="name" placeholder="Enter name"/> <br><br>
<input type="email" name="email" placeholder="Enter email"/><br><br>

<button type="submit">Submit</button>

</form>  

</body>
</html>

We add the route to "/app/Config/routes.php":

 
$routes->get('post', 'PostController::index');
$routes->post('post', 'PostController::index');

In PostController::index we enter:


    public function index()
    {
        $templateData = [
            'name' => null,
            'email' => null,
        ];
        
        
        if ($this->request->getMethod() == "post") 
        {
            $templateData['name'] = $this->request->getVar("name");
            $templateData['email'] = $this->request->getVar("email");    
        }
        
        
        return view('posts', $templateData);
    }

Post request

We create controller named "Fetch":

 php spark make:controller Fetch --suffix

HTML template ./app/Views/fetch.php and add content:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
  
<input class="ds-input"  placeholder="POST SEND" /> <br><br>
<input class="ds-output" placeholder="POST RETURN" readonly /> <br><br>
<button onclick="clickAction()"> Klik </button>

</body>
</html>
<script>

const clickAction = async () => {

    const inputElement = document.querySelector('.ds-input');
    const outputElement = document.querySelector('.ds-output');
        
    var postData = new FormData();  
    postData.append('name', inputElement.value);

    try {
        const response = await fetch('/fetch', {
            method: 'POST', 
            body: postData,
        });

        const jsonUserData = await response.json();
        outputElement.value = jsonUserData.name;
        console.log( jsonUserData );
    }
    catch (error) {
        console.error(error);
    }
}

</script>

Routes (/app/Config/routes.php)


$routes->get('fetch', 'FetchController::index');
$routes->post('fetch', 'FetchController::index');

FetchController:

<?php

namespace App\Controllers;

use App\Controllers\BaseController;

class FetchController extends BaseController
{
    public function index()
    {
        if ($this->request->getMethod() == "post") 
        {
            $name = $this->request->getVar("name");
            echo json_encode(['name'=> $name]);
            die();
        }
        
        return view('fetch');
    }
}

Instead of the "vanilla" answer, we can also use the built-in:

$data = [
    'success' => true,
    'id'      => 123,
];

$this->response->setStatusCode(500);
return $this->response->setJSON(data);

damirSijakovic

DS Log

KINGCODE

Featured

VUE on Linux

Symfony PHP

Trying Linux from Windows

AI, Linux & C

How to set up a PHP development server on Ubuntu 22.04

Text editors

Fonts

Try Linux from Windows

Latest

CodeIgniter - post form

Post request