Integrasi JotForm dengan API Premis (MySQL/ORACLE) di AWS

by sabrihisham · Published January 15, 2021 · Updated January 15, 2021

Assalamualaikum

Saya berkongsi kaedah untuk integrasi jotform dengan database agensi atau on premis. Iaitu pengguna akan bangunkan form/borang menggunakan platform jotform dan publish. apabila pengguna memasukkan data di form tersebut data akan disimpan di dalam pangkalan data UMP. Dalam contoh ini saya menggunakan MySQL yang dipasangan di Aws Cloud sebagai contoh. Ia adalah sama jika dilaksanakan menggunakan database oracle UMP.

Langkah 1 : Daftar pengguna

Jika pengguna baru sila daftar di https://www.jotform.com/ menggunakan akaun google atau emel seperti biasa

Langkah 2 : Bangunkan Form Ringkas

Dalam tutorial ini saya tunjukkan dua medan sahaja iaitu nama dan emel.

Langkah 3 : Melihat Borang dengan Publish

Sila klik pada menu top ‘Publish‘ dan anda boleh cuba memasukkan data untuk pastikan borang tadi berfungsi. Dalam kes ini, data disimpan di dalam pangkalan data cloud jotform secara default.

Langkah 4 : Menyemak struktur data jotform selepas submit

Terus ke menu ‘setting’ dan terus ke menu kiri klik pada ‘thank you page’.

masukkan link ini ‘https://www.jotform.com/show-post-data/’

Selepas submit borang, page akan terus ke link ini dan dipaparkan struktur data

Langkah 5 : Bina database dan table

Ok, kita mula dengan cipta database dan table ringkas spt di bawah

Langkah 6 : Bangunkan Skrip PHP untuk lakukan tugas simpan data di dalam table

Contoh files php : submit.php

<?php

ini_set(‘display_errors’, 0);

ini_set(‘display_startup_errors’,0);

error_reporting(E_ALL);

function extendedAddslash(array $params): array{

foreach ($params as &$var) {

is_array($var) ? ExtendedAddslash($var) : $var = addslashes($var);

unset($var);

}

return $params;

}

$submissionData = @$_POST;

if (! isset($submissionData[“submission_id”])) {

die(“Invalid submission data! ‘submission_id’ not exists.”);

}

//print_r($submissionData);

define(‘DB_HOST’,’localhost’);

define(‘DB_USER’,’root’);

define(‘DB_PASS’,’xx’);

define(‘DB_NAME’,’jotformdb’);

$db_host = ‘localhost’;

$db_username = ‘jobformdb’;

$db_password = ‘root’;

$db_name = ‘zaqwertsy’;

try

{

$dbh = new PDO(“mysql:host=”.DB_HOST.”;dbname=”.DB_NAME,DB_USER, DB_PASS,array(PDO::MYSQL_ATTR_INIT_COMMAND => “SET NAMES ‘utf8′”));

}

catch (PDOException $e)

{

exit(“Error: ” . $e->getMessage());

}

$submission_id = $submissionData[“submission_id”];

$formID = $submissionData[“formID”];

$nama = $submissionData[“nama”];

$emel = $submissionData[“emel”];

try

{

$query = “INSERT INTO info (submission_id, formID, email, name) VALUES (:submission_id, :formID, :emel, :nama)”;

$data = array(

‘:submission_id’ => $submission_id,

‘:formID’ => $formID,

‘:emel’ => $emel,

‘:nama’ => $nama

);

$statement = $dbh->prepare($query);

$statement->execute($data);

<?php

}

catch(PDOException $e){

$dbh->rollback();

echo ‘Connection failed: ‘ . $e->getMessage();

exit(“Error: ” . $e->getMessage());

}

Langkah 7 : Letakkan files submit.php di dalam web server

Anda boleh letakan skrip php ini di localhost atau di cloud. Contoh yang saya tunjukkan ini adalah skrip saya diletakkan di cloud aws.

dan link akan jadi mcm nie:

http://bukusicomel.name.my/sicomelapi/submit.php

Langkah 8 : Setting di jotform untuk panggil skrip ini

Seterusnya settingkan skrip ini di menu ‘thank you page’ sebelah kiri apabila kita klik menu atas setting untuk memanggil skrips ini

Ok done.

Seterusnya anda boleh cuba untuk memasukkan data dengan sambil menyemak data berjaya masuk ke table dalam database atau tidak

Langkah 10 : Semakan di table database

Ok nampaknya, data telah berjaya disimpan di dalam table pangkalan data mysql

Langkah 10 : Paparkan

Ok seterusnya bangunkkan skrips php untuk paparkan data terus di web page untuk memudahkan melihat data yang dimasukkan tadi

ini skrip yang saya namakan view.php

<?php

ini_set(‘display_errors’, 1);

ini_set(‘display_startup_errors’,1);

error_reporting(E_ALL);

define(‘DB_HOST’,’localhost’);

define(‘DB_USER’,’root’);

define(‘DB_PASS’,’xx’);

define(‘DB_NAME’,’jotformdb’);

try

{

$dbh = new PDO(“mysql:host=”.DB_HOST.”;dbname=”.DB_NAME,DB_USER, DB_PASS,array(PDO::MYSQL_ATTR_INIT_COMMAND => “SET NAMES ‘utf8′”));

}

catch (PDOException $e)

{

exit(“Error: ” . $e->getMessage());

}

<thead>

<tr>

<th>submission_id</th>

<th>formID</th>

</tr>

</thead>

<tbody>

<?php

/**papar */

$sql = “SELECT submission_id,formID,email,name

FROM info”;

$query = $dbh -> prepare($sql);

$query->execute();

$results=$query->fetchAll(PDO::FETCH_OBJ);

$cnt=1;

if($query->rowCount() > 0)

{

foreach($results as $result)

{

<tr>

<td><?php echo htmlentities($result->submission_id); ?></td>

<td><?php echo htmlentities($result->formID); ?></td>

<td><?php echo htmlentities($result->email); ?></td>

</tr>

<?php

}

dan paparan adalah seperti ini

http://bukusicomel.name.my/sicomelapi/view.php

Ok boleh cuba borang di bawah :

dan cuba masukkan data di borang dan buka link

http://bukusicomel.name.my/sicomelapi/view.php

Selamat Mencuba

Integrasi JotForm dengan API Premis (MySQL/ORACLE) di AWS

You may also like...

Leave a Reply Cancel reply

Recent Posts

Recent Comments

Archives

Categories

Meta

Integrasi JotForm dengan API Premis (MySQL/ORACLE) di AWS

You may also like...

Membina Graf mengggunakan chart.js

Trigger Message @ Notification melalui Whatapps

Integrasi dengan Google OAuth 2.0 – SSO & Google Login

Leave a Reply Cancel reply

Recent Posts

Recent Comments

Archives

Categories

Meta