├── index.php
├── README.md
├── style.css
├── liff-starter.js
├── catatan-config.js
└── index.html


/index.php:
--------------------------------------------------------------------------------
1 | <?php
2 | include_once("index.html");


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Catatan Sederhana LIFF
2 | 
3 | Repositori ini berisi contoh project Catatan Sederhana menggunakan LIFF v2 yang ada di Academy LINE LIFF
4 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |     font-size: 11px;
 3 | }
 4 | 
 5 | table {
 6 |     width: 100%;
 7 |     overflow-x: auto;
 8 |     display: block;
 9 | }
10 | 
11 | div {
12 |     max-width: 100%;
13 |     text-align: center;
14 | }
15 | 
16 | th {
17 |     text-align: left;
18 | }
19 | 
20 | img { 
21 |     max-width: 25%; 
22 |     height: auto; 
23 | }
24 | 
25 | button {
26 |     margin: 4px;
27 | }
28 | 
29 | #code-block {
30 |     background-color: #eee;
31 |     border: 1px solid #999;
32 |     display: block;
33 |     padding: 20px;
34 |     width: 50%;
35 |     margin-left: auto;
36 |     margin-right: auto;
37 |     overflow-x: auto;
38 |     white-space: nowrap;
39 | }
40 | 
41 | #statusMessage {
42 |     position: relative;
43 |     top: 40px;
44 | }
45 | 
46 | .textLeft {
47 |     text-align: left;
48 | }
49 | 
50 | .buttonGroup {
51 |     position: relative;
52 |     top: 20px;
53 | }
54 | 
55 | .hidden {
56 |     display: none;
57 | }


--------------------------------------------------------------------------------
/liff-starter.js:
--------------------------------------------------------------------------------
  1 | window.onload = function() {
  2 |     const useNodeJS = false;   // if you are not using a node server, set this value to false
  3 |     const defaultLiffId = "";   // change the default LIFF value if you are not using a node server
  4 | 
  5 |     // DO NOT CHANGE THIS
  6 |     let myLiffId = "";
  7 | 
  8 |     // if node is used, fetch the environment variable and pass it to the LIFF method
  9 |     // otherwise, pass defaultLiffId
 10 |     if (useNodeJS) {
 11 |         fetch('/send-id')
 12 |             .then(function(reqResponse) {
 13 |                 return reqResponse.json();
 14 |             })
 15 |             .then(function(jsonResponse) {
 16 |                 myLiffId = jsonResponse.id;
 17 |                 initializeLiffOrDie(myLiffId);
 18 |             })
 19 |             .catch(function(error) {
 20 |                 document.getElementById("liffAppContent").classList.add('hidden');
 21 |                 document.getElementById("nodeLiffIdErrorMessage").classList.remove('hidden');
 22 |             });
 23 |     } else {
 24 |         myLiffId = defaultLiffId;
 25 |         initializeLiffOrDie(myLiffId);
 26 |     }
 27 | };
 28 | 
 29 | /**
 30 | * Check if myLiffId is null. If null do not initiate liff.
 31 | * @param {string} myLiffId The LIFF ID of the selected element
 32 | */
 33 | function initializeLiffOrDie(myLiffId) {
 34 |     if (!myLiffId) {
 35 |         document.getElementById("liffAppContent").classList.add('hidden');
 36 |         document.getElementById("liffIdErrorMessage").classList.remove('hidden');
 37 |     } else {
 38 |         initializeLiff(myLiffId);
 39 |     }
 40 | }
 41 | 
 42 | /**
 43 | * Initialize LIFF
 44 | * @param {string} myLiffId The LIFF ID of the selected element
 45 | */
 46 | function initializeLiff(myLiffId) {
 47 |     liff
 48 |         .init({
 49 |             liffId: myLiffId
 50 |         })
 51 |         .then(() => {
 52 |             // start to use LIFF's api
 53 |             initializeApp();
 54 |         })
 55 |         .catch((err) => {
 56 |             document.getElementById("liffAppContent").classList.add('hidden');
 57 |             document.getElementById("liffInitErrorMessage").classList.remove('hidden');
 58 |         });
 59 | }
 60 | 
 61 | /**
 62 |  * Initialize the app by calling functions handling individual app components
 63 |  */
 64 | function initializeApp() {
 65 |     displayLiffData();
 66 |     displayIsInClientInfo();
 67 |     registerButtonHandlers();
 68 | 
 69 |     // check if the user is logged in/out, and disable inappropriate button
 70 |     if (liff.isLoggedIn()) {
 71 |         document.getElementById('liffLoginButton').disabled = true;
 72 |     } else {
 73 |         document.getElementById('liffLogoutButton').disabled = true;
 74 |     }
 75 | }
 76 | 
 77 | /**
 78 | * Display data generated by invoking LIFF methods
 79 | */
 80 | function displayLiffData() {
 81 |     document.getElementById('isInClient').textContent = liff.isInClient();
 82 |     document.getElementById('isLoggedIn').textContent = liff.isLoggedIn();
 83 | }
 84 | 
 85 | /**
 86 | * Toggle the login/logout buttons based on the isInClient status, and display a message accordingly
 87 | */
 88 | function displayIsInClientInfo() {
 89 |     if (liff.isInClient()) {
 90 |         document.getElementById('liffLoginButton').classList.toggle('hidden');
 91 |         document.getElementById('liffLogoutButton').classList.toggle('hidden');
 92 |         document.getElementById('isInClientMessage').textContent = 'You are opening the app in the in-app browser of LINE.';
 93 |     } else {
 94 |         document.getElementById('isInClientMessage').textContent = 'You are opening the app in an external browser.';
 95 |     }
 96 | }
 97 | 
 98 | function registerButtonHandlers() {
 99 |     // openWindow call
100 |     document.getElementById('openWindowButton').addEventListener('click', function() {
101 |         liff.openWindow({
102 |             url: 'https://catatanliffv2.herokuapp.com/', // Isi dengan Endpoint URL aplikasi web Anda
103 |             external: true
104 |         });
105 |     });
106 | 
107 |     // closeWindow call
108 |     document.getElementById('closeWindowButton').addEventListener('click', function() {
109 |         if (!liff.isInClient()) {
110 |             sendAlertIfNotInClient();
111 |         } else {
112 |             liff.closeWindow();
113 |         }
114 |     });
115 | 
116 |     // login call, only when external browser is used
117 |     document.getElementById('liffLoginButton').addEventListener('click', function() {
118 |         if (!liff.isLoggedIn()) {
119 |             liff.login();
120 |         }
121 |     });
122 | 
123 |     // logout call only when external browse
124 |     document.getElementById('liffLogoutButton').addEventListener('click', function() {
125 |         if (liff.isLoggedIn()) {
126 |             liff.logout();
127 |             window.location.reload();
128 |         }
129 |     });
130 | 
131 |     // sendMessages call
132 |     document.getElementById('sendMessageButton').addEventListener('click', function() {
133 |         if (!liff.isInClient()) {
134 |             sendAlertIfNotInClient();
135 |         } else {
136 |             liff.sendMessages([{
137 |                 'type': 'text',
138 |                 'text': "Anda telah menggunakan fitur Send Message!"
139 |             }]).then(function() {
140 |                 window.alert('Ini adalah pesan dari fitur Send Message');
141 |             }).catch(function(error) {
142 |                 window.alert('Error sending message: ' + error);
143 |             });
144 |         }
145 |     });
146 | }
147 | 
148 | /**
149 | * Alert the user if LIFF is opened in an external browser and unavailable buttons are tapped
150 | */
151 | function sendAlertIfNotInClient() {
152 |     alert('This button is unavailable as LIFF is currently being opened in an external browser.');
153 | }
154 | 
155 | /**
156 | * Toggle specified element
157 | * @param {string} elementId The ID of the selected element
158 | */
159 | function toggleElement(elementId) {
160 |     const elem = document.getElementById(elementId);
161 |     if (elem.offsetWidth > 0 && elem.offsetHeight > 0) {
162 |         elem.style.display = 'none';
163 |     } else {
164 |         elem.style.display = 'block';
165 |     }
166 | }


--------------------------------------------------------------------------------
/catatan-config.js:
--------------------------------------------------------------------------------
  1 | function loadCatatan() {
  2 |     if (localStorage.list_data && localStorage.id_data) {
  3 |         list_data = JSON.parse(localStorage.getItem('list_data'));
  4 |         var data_app = "";
  5 |         if (list_data.length > 0) {
  6 |             data_app = '<table class="table table-striped table-dark">';
  7 |             data_app += '<thead>' +
  8 |                 '<th>ID</th>' +
  9 |                 '<th>Nama</th>' +
 10 |                 '<th>Tanggal</th>' +
 11 |                 '<th>Agenda</th>' +
 12 |                 '<th>Hapus Agenda</th>' +
 13 |                 '<th>Lihat Agenda</th>' +
 14 |                 '<th>Edit Agenda</th>' +
 15 |                 '</thead> <tbody>';
 16 | 
 17 |             for (i in list_data) {
 18 |                 data_app += '<tr>';
 19 |                 data_app +=
 20 |                     '<td>' + list_data[i].id_data + ' </td>' +
 21 |                     '<td>' + list_data[i].nama + ' </td>' +
 22 |                     '<td>' + list_data[i].tanggal + ' </td>' +
 23 |                     '<td>' + list_data[i].agenda + ' </td>' +
 24 |                     '<td><a class="btn btn-danger btn-small" href="javascript:void(0)" onclick="hapusData(\'' + list_data[i].id_data + '\')">Hapus</a></td>' +
 25 |                     '<td><a class="btn btn-danger btn-small" href="javascript:void(0)" onclick="lihatData(\'' + list_data[i].id_data + '\')">Lihat</a></td>' +
 26 |                     '<td><a class="btn btn-warning btn-small" href="javascript:void(0)" onclick="editData(\'' + list_data[i].id_data + '\')">Edit</a></td>';
 27 |                 data_app += '</tr>';
 28 |             }
 29 | 
 30 |             data_app += '</tbody></table>';
 31 | 
 32 |         }
 33 |         else {
 34 |             data_app = "Catatan masih kosong nih";
 35 |         }
 36 | 
 37 | 
 38 |         $('#list-catatan').html(data_app);
 39 |         $('#list-catatan').hide();
 40 |         $('#list-catatan').fadeIn(100);
 41 |     }
 42 | }
 43 | 
 44 | function editData(id) {
 45 | 
 46 |     if (localStorage.list_data && localStorage.id_data) {
 47 |         list_data = JSON.parse(localStorage.getItem('list_data'));
 48 |         idx_data = 0;
 49 |         for (i in list_data) {
 50 |             if (list_data[i].id_data == id) {
 51 |                 $("#eid_data").val(list_data[i].id_data);
 52 |                 $("#enama").val(list_data[i].nama);
 53 |                 $("#etanggal").val(list_data[i].tanggal);
 54 |                 $("#eagenda").val(list_data[i].agenda);
 55 |                 list_data.splice(idx_data, 1);
 56 |             }
 57 |             idx_data++;
 58 |         }
 59 |         gantiMenu('edit-data');
 60 | 
 61 |     }
 62 | 
 63 | }
 64 | 
 65 | function lihatData(id) {
 66 |     if (localStorage.list_data && localStorage.id_data) {
 67 |         list_data = JSON.parse(localStorage.getItem('list_data'));
 68 |         idx_data = 0;
 69 |         for (i in list_data) {
 70 |             if (list_data[i].id_data == id) {
 71 |                 $("#lid_data").val(list_data[i].id_data);
 72 |                 $("#lnama").val(list_data[i].nama);
 73 |                 $("#ltanggal").val(list_data[i].tanggal);
 74 |                 $("#lagenda").val(list_data[i].agenda);
 75 |                 list_data.splice(idx_data, 1);
 76 |             }
 77 |             idx_data++;
 78 |         }
 79 |         gantiMenu('lihat-data');
 80 | 
 81 |     }
 82 | }
 83 | 
 84 | 
 85 | function simpanData() {
 86 | 
 87 |     if (!liff.isInClient()) {
 88 |         sendAlertIfNotInClient();
 89 |     } else {
 90 |         liff.sendMessages([{
 91 |             'type': 'text',
 92 |             'text': "Catatan baru berhasil disimpan"
 93 |         }]).then(function() {
 94 |             alert('Catatan Tersimpan');
 95 |         }).catch(function(error) {
 96 |             alert('Aduh kok error ya...');
 97 |         });
 98 |     }
 99 | 
100 |     nama = $('#nama').val();
101 |     tanggal = $('#tanggal').val();
102 |     agenda = $('#agenda').val();
103 | 
104 |     if (localStorage.list_data && localStorage.id_data) {
105 |         list_data = JSON.parse(localStorage.getItem('list_data'));
106 |         id_data = parseInt(localStorage.getItem('id_data'));
107 |     }
108 |     else {
109 |         list_data = [];
110 |         id_data = 0;
111 |     }
112 | 
113 |     id_data++;
114 |     list_data.push({ 'id_data': id_data, 'nama': nama, 'tanggal': tanggal, 'agenda': agenda });
115 |     localStorage.setItem('list_data', JSON.stringify(list_data));
116 |     localStorage.setItem('id_data', id_data);
117 |     document.getElementById('form-data').reset();
118 |     gantiMenu('list-catatan');
119 | 
120 |     return false;
121 | }
122 | 
123 | function simpanEditData() {
124 | 
125 |     if (!liff.isInClient()) {
126 |         sendAlertIfNotInClient();
127 |     } else {
128 |         liff.sendMessages([{
129 |             'type': 'text',
130 |             'text': "Catatan yang diedit sudah tersimpan"
131 |         }]).then(function() {
132 |             alert('Catatan tersimpan');
133 |         }).catch(function(error) {
134 |             alert('Aduh kok error ya...');
135 |         });
136 |     }
137 | 
138 |     id_data = $('#eid_data').val();
139 |     nama = $('#enama').val();
140 |     tanggal = $('#etanggal').val();
141 |     agenda = $('#eagenda').val();
142 | 
143 |     list_data.push({ 'id_data': id_data, 'nama': nama, 'tanggal': tanggal, 'agenda': agenda });
144 |     localStorage.setItem('list_data', JSON.stringify(list_data));
145 |     document.getElementById('eform-data').reset();
146 |     gantiMenu('list-catatan');
147 | 
148 |     return false;
149 | }
150 | 
151 | function hapusData(id) {
152 | 
153 |     if (!liff.isInClient()) {
154 |         sendAlertIfNotInClient();
155 |     } else {
156 |         liff.sendMessages([{
157 |             'type': 'text',
158 |             'text': "Catatan sudah terhapus"
159 |         }]).then(function() {
160 |             alert('Catatan sudah dihapus');
161 |         }).catch(function(error) {
162 |             alert('Aduh kok nggak bisa');
163 |         });
164 |     }
165 | 
166 |     if (localStorage.list_data && localStorage.id_data) {
167 |         list_data = JSON.parse(localStorage.getItem('list_data'));
168 | 
169 |         idx_data = 0;
170 |         for (i in list_data) {
171 |             if (list_data[i].id_data == id) {
172 |                 list_data.splice(idx_data, 1);
173 |             }
174 |             idx_data++;
175 |         }
176 | 
177 |         localStorage.setItem('list_data', JSON.stringify(list_data));
178 |         loadCatatan();
179 |     }
180 | }
181 | 
182 | 
183 | function gantiMenu(menu) {
184 |     if (menu == "list-catatan") {
185 |         loadCatatan();
186 |         $('#tambah-catatan').hide();
187 |         $('#list-catatan').fadeIn();
188 |         $('#edit-data').hide();
189 |         $('#lihat-data').hide();
190 |     }
191 |     else if (menu == "tambah-catatan") {
192 |         $('#tambah-catatan').fadeIn();
193 |         $('#list-catatan').hide();
194 |         $('#edit-data').hide();
195 |         $('#lihat-data').hide();
196 |     } else if (menu == "edit-data") {
197 |         $('#edit-data').fadeIn();
198 |         $('#tambah-catatan').hide();
199 |         $('#list-catatan').hide();
200 |         $('#lihat-data').hide();
201 |     } else if (menu == "lihat-data") {
202 |         $('#lihat-data').fadeIn();
203 |         $('#edit-data').hide();
204 |         $('#tambah-catatan').hide();
205 |         $('#list-catatan').hide();
206 |     }
207 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML>
  2 | <html>
  3 | 
  4 | <head>
  5 |     <title>Catatan Harianku</title>
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  8 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  9 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 10 |     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
 11 |     <link rel="stylesheet" href="style.css">
 12 | 
 13 |     <style>
 14 |         .table>thead>tr>th {
 15 |             padding: 60px;
 16 |         }
 17 |     </style>
 18 | 
 19 | 
 20 | </head>
 21 | 
 22 | <body onload="loadCatatan();">
 23 | 
 24 |     <div class="col-xs-12 col-md-8 col-md-offset-2" ng-controller="listContactCtrl">
 25 |         <div class="page-header">
 26 |             <h1 align="center">
 27 |                 Catatan Harianku
 28 |             </h1>
 29 |             <ul class="nav nav-pills">
 30 |                 <li><a id="nav-list-catatan" href="javascript:void(0);" onclick="gantiMenu('list-catatan');">List Catatan</a></li>
 31 |                 <li><a id="nav-tambah-catatan" href="javascript:void(0);" onclick="gantiMenu('tambah-catatan');">Tambah Catatan</a></li>
 32 |             </ul>
 33 | 
 34 |         </div>
 35 |         <div id="tambah-catatan" class="well" style="display:none;">
 36 |             <form id="form-data">
 37 |                 <div id="nama-group" class="form-group">
 38 |                     <label>Nama:</label>
 39 |                     <input type="text" class="form-control" id="nama" name="nama">
 40 |                 </div>
 41 |                 <div id="tanggal-group" class="form-group">
 42 |                     <label>Tanggal:</label>
 43 |                     <input type="text" class="form-control" id="tanggal" name="tanggal">
 44 |                 </div>
 45 |                 <div id="agenda-group" class="form-group">
 46 |                     <label>Agenda:</label>
 47 |                     <textarea class="form-control" id="agenda" name="agenda"></textarea><br />
 48 |                 </div>
 49 |                 <input type="button" value="Simpan" onclick="simpanData();" class="btn btn-success btn-small" />
 50 |                 <input type="reset" value="Reset" onclick="" class="btn btn-warning btn-small" />
 51 |             </form>
 52 |         </div>
 53 | 
 54 |         <div id="edit-data" class="well" style="display:none;">
 55 |             <form id="eform-data">
 56 | 
 57 |                 <div id="nama-group" class="form-group" style="display:none;">
 58 |                     <label>id data:</label>
 59 |                     <input type="text" class="form-control" id="eid_data" name="nama">
 60 |                 </div>
 61 | 
 62 |                 <div id="nama-group" class="form-group">
 63 |                     <label>Nama:</label>
 64 |                     <input type="text" class="form-control" id="enama" name="nama">
 65 |                 </div>
 66 |                 <div id="tanggal-group" class="form-group">
 67 |                     <label>Tanggal:</label>
 68 |                     <input type="text" class="form-control" id="etanggal" name="tanggal">
 69 |                 </div>
 70 |                 <div id="agenda-group" class="form-group">
 71 |                     <label>Agenda:</label>
 72 |                     <textarea class="form-control" id="eagenda" name="agenda"></textarea><br />
 73 |                 </div>
 74 |                 <input type="button" value="Simpan" onclick="simpanEditData();" class="btn btn-success btn-small" />
 75 |                 <input type="reset" value="Reset" onclick="" class="btn btn-warning btn-small" />
 76 |                 <input type="button" value="Cancel" onclick="gantiMenu('list-catatan');"
 77 |                     class="btn btn-warning btn-small" />
 78 |             </form>
 79 |         </div>
 80 | 
 81 |         <div id="lihat-data" class="well" style="display:none;">
 82 |             <form id="eform-data">
 83 | 
 84 |                 <div id="nama-group" class="form-group" style="display:none;">
 85 |                     <label for="disabled">id data:</label>
 86 |                     <input type="text" class="form-control" id="lid_data" name="nama" disabled>
 87 |                 </div>
 88 | 
 89 |                 <div id="nama-group" class="form-group">
 90 |                     <label for="disabled">Nama:</label>
 91 |                     <input type="text" class="form-control" id="lnama" name="nama" disabled>
 92 |                 </div>
 93 |                 <div id="tanggal-group" class="form-group">
 94 |                     <label for="disabled">Tanggal:</label>
 95 |                     <input type="text" class="form-control" id="ltanggal" name="tanggal" disabled>
 96 |                 </div>
 97 |                 <div id="agenda-group" class="form-group">
 98 |                     <label for="disabled">Agenda:</label>
 99 |                     <textarea class="form-control" id="lagenda" name="agenda" disabled></textarea>
100 |                 </div>
101 |                 <input type="button" value="Kembali" onclick="gantiMenu('list-catatan');"
102 |                     class="btn btn-warning btn-small" />
103 |             </form>
104 |         </div>
105 | 
106 | 
107 |         <div id="list-catatan" class="well">
108 |             Pilih List Catatan untuk melihat catatan yang sudah dibuat.
109 |         </div>
110 |         <!--Konten LIFF v2-->
111 | 
112 |         <div id="liffAppContent">
113 |             <!-- ACTION BUTTONS -->
114 |             <div class="buttonGroup">
115 |                 <div class="buttonRow">
116 |                     <button id="openWindowButton" class="btn btn-success btn-small">Open External Window</button>
117 |                     <button id="closeWindowButton" class="btn btn-danger btn-small">Close LIFF App</button>
118 |                     <button id="sendMessageButton" class="btn btn-warning btn-small">Send Message</button>
119 |                 </div>
120 | 
121 |             </div>
122 | 
123 |             <!-- LIFF DATA -->
124 |             <div id="liffData">
125 |                 <h3 id="liffDataHeader" class="textLeft">Informasi:</h3>
126 |                 <table>
127 |                     <tr>
128 |                         <th>isInClient : </th>
129 |                         <td id="isInClient" class="textLeft"></td>
130 |                     </tr>
131 |                     <tr>
132 |                         <th>isLoggedIn : </th>
133 |                         <td id="isLoggedIn" class="textLeft"></td>
134 |                     </tr>
135 |                 </table>
136 |             </div>
137 |             <!-- LOGIN LOGOUT BUTTONS -->
138 |             <div class="buttonGroup">
139 |                 <button id="liffLoginButton" class="btn btn-success btn-small">Log in</button>
140 |                 <button id="liffLogoutButton" class="btn btn-warning btn-small">Log out</button>
141 |             </div>
142 |             <div id="statusMessage">
143 |                 <div id="isInClientMessage"></div>
144 |                 <div id="apiReferenceMessage">
145 |                     <p>Available LIFF methods vary depending on the browser you use to open the LIFF app.</p>
146 |                     <p>Please refer to the <a
147 |                             href="https://developers.line.biz/en/reference/liff/#initialize-liff-app">API reference
148 |                             page</a> for more information.</p>
149 |                 </div>
150 |             </div>
151 |         </div>
152 |         <!-- LIFF ID ERROR -->
153 |         <div id="liffIdErrorMessage" class="hidden">
154 |             <p>You have not assigned any value for LIFF ID.</p>
155 |             <p>If you are running the app using Node.js, please set the LIFF ID as an environment variable in your
156 |                 Heroku account follwing the below steps: </p>
157 |             <code id="code-block">
158 |                 <ol>
159 |                     <li>Go to `Dashboard` in your Heroku account.</li>
160 |                     <li>Click on the app you just created.</li>
161 |                     <li>Click on `Settings` and toggle `Reveal Config Vars`.</li>
162 |                     <li>Set `MY_LIFF_ID` as the key and the LIFF ID as the value.</li>
163 |                     <li>Your app should be up and running. Enter the URL of your app in a web browser.</li>
164 |                 </ol>
165 |             </code>
166 |             <p>If you are using any other platform, please add your LIFF ID in the <code>index.html</code> file.</p>
167 |             <p>For more information about how to add your LIFF ID, see <a
168 |                     href="https://developers.line.biz/en/reference/liff/#initialize-liff-app">Initializing the LIFF
169 |                     app</a>.</p>
170 |         </div>
171 |         <!-- LIFF INIT ERROR -->
172 |         <div id="liffInitErrorMessage" class="hidden">
173 |             <p>Something went wrong with LIFF initialization.</p>
174 |             <p>LIFF initialization can fail if a user clicks "Cancel" on the "Grant permission" screen, or if an error occurs in the process of <code>liff.init()</code>.
175 |         </div>
176 |         <!-- NODE.JS LIFF ID ERROR -->
177 |         <div id="nodeLiffIdErrorMessage" class="hidden">
178 |             <p>Unable to receive the LIFF ID as an environment variable.</p>
179 |         </div>
180 |     </div>
181 | </body>
182 | <!-- Integrasi LIFF SDK dan konfigurasi aplikasi catatan sederhana -->
183 | <script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
184 | <script src="catatan-config.js"></script>
185 | <script src="liff-starter.js"></script>
186 | 
187 | </html>


--------------------------------------------------------------------------------