Offline data handle kwa kutumia javascript
Katika somo hili tutaenda kujifunza namna ya kuhifadhi taarifa za mtumiaji endapo mtandao utakuwa haupo ()
TATIZO HALISI TUNALOTATUA
Katika matumizi ya kawaida:
-
Mtumiaji anaweza kujaza form
-
Mtandao ukakatika
-
Taarifa zinapotea
-
Mtumiaji anakasirika
Lengo:
Kuhifadhi data ya mtumiaji ikiwa mtandao haupo,
na kuituma mara tu mtandao utakaporudi automatical.
CONCEPT KUU (IDEA YA MFUMO)
Mfumo wetu unafanya vitu vinne:
-
Kusoma data ya mtumiaji
-
Kuthibitisha kama imejazwa vizuri
-
Kukagua kama mtandao upo
-
Kuhifadhi au kutuma data kulingana na hali ya mtandao
HATUA YA 1: KUELEWA HTML KWANZA
Kazi ya HTML ni nini?
HTML hutengeneza muonekano wa ukurasa na sehemu ambazo mtumiaji ataingiliana nazo.
Katika mfumo wetu tunayo form:
<div> <form id="my_form"> <label for="name">Name:</label> <br> <input type="text" id="user_name" placeholder="Name..."><br><br> <label for="email">Email</label><br> <input type="email" id="email" placeholder="example@gmail.com"><br> <br> <input type="submit" value="Send"> <p><em id="em"></em></p> </form> </div>
<form id="my_form">Hii id="my_form" inatuwezesha kuifikia form kupitia JavaScript.
Ndani ya form kuna input hizi:
<input type="text" id="user_name"> <input type="email" id="email">Kila input ina id ya kipekee:
-
user_name -
email
Hizi ndizo JS inazitafuta baadaye.
HATUA YA 2: KUUNGANISHA HTML NA JAVASCRIPT
JavaScript inasema:
Hii inamaanisha:
"Nipe element ya HTML yenye id = my_form"
HATUA YA 3: KUSIKILIZA TENDO LA MTUMIAJI
Hii inamaanisha:
"Mtumiaji akibonyeza Send, fanya kazi fulani."
HATUA YA 4: KUSOMA TAARIFA KUTOKA HTML
Hii inatafsiriwa hivi:
| Sehemu | Maana |
|---|---|
document |
Ukurasa mzima wa HTML |
querySelector("#user_name") |
Tafuta element yenye id user_name |
.value |
Chukua maandishi aliyoyaandika mtumiaji |
Kwa hiyo:
JavaScript inasoma kile kilichoandikwa kwenye
<input id="user_name">
Vivyo hivyo:
HATUA YA 5: KUHAKIKI DATA
Kabla ya kufanya lolote, mfumo unasema:
"Je, data imejazwa?"
Hii huzuia fomu tupu.
HATUA YA 6: KUANGALIA HALI YA MTANDAO
Hii ndiyo akili ya mfumo:
| Hali | Hatua |
|---|---|
| Mtandao upo | Tuma data |
| Mtandao haupo | Hifadhi data |
HATUA YA 7: KUHIFADHI DATA
Tunaiambia browser:
"Hifadhi data hii mpaka nitakapoirudia."
HATUA YA 8: KUTUMA DATA MTANDAO UKIRUDI
Browser inaposema:
"Sasa nina mtandao"
Mfumo unasema:
"Angalia kama kuna data iliyohifadhiwa, itume."
HATUA YA 9: KUSAFISHA BAADA YA MAFANIKIO
Hii huzuia kutuma mara mbili.
HITIMISHO KWA MWANAFUNZI
JavaScript haisomi data hewani.
Inaisoma kutoka kwenye HTML.
Ndiyo maana lazima tuanze na HTML kwanza.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Form</title></head><body> <div> <form id="my_form"> <label for="name">Name:</label> <br> <input type="text" id="user_name" placeholder="Name..."><br><br> <label for="email">Email</label><br> <input type="email" id="email" placeholder="example@gmail.com"><br> <br> <input type="submit" value="Send"> <p><em id="em"></em></p> </form> </div> <!-- Js --> <script> const form = document.getElementById('my_form') form.addEventListener('submit', async function (ev) { ev.preventDefault() // pata taarifa kutoka kwenye form let emphasise = document.getElementById('em') let user_name = document.querySelector("#user_name").value let email = document.querySelector("#email").value if (user_name.trim() === ""){ emphasise.textContent = "Name is required!"; return; } if (email.trim() === ""){ emphasise.textContent = 'Email is require!'; return; } emphasise.textContent = "" form.reset() // Unda objects ya taarifa zoote let userData = {user_name, email} // Angalia kama hakuna mtandao if (! navigator.onLine){ alert('hakuna mtandao, tunaifadhi taarifa zako mpaka utakaporudi hewani!') // Hifadhi taarifa kwenye localStorage localStorage.setItem('pendingData', JSON.stringify(userData)) }else{ await saveUserInfo(userData) } }); // Tuma taarifa za mtumiaji kama mtandao upo. async function saveUserInfo(userData) { // Hapa ndipo unaweza kutuma taarifa hizi rasmi kwenye server na // kuzipokea na PHP rwap string const data = userData let Name = data.user_name let email = data.email alert(`Taarifa ya mafanikio kwa kutuma taarifa za ${Name.toUpperCase()} na barua pepe ${email.toLowerCase()}`) //Futa data kutoka kwenye LocalSrorage baada ya kutuma taarifa let savedData = localStorage.getItem('pendingData') if(savedData){ localStorage.removeItem('pendingData') } } // Angalia kawa kifaa kimepata mtandao window.addEventListener('online', async function() { // Angalia kama kuna data yoyote let pendingData = localStorage.getItem('pendingData') // Rudisha data kuwa encoded let get_data = JSON.parse(pendingData) await saveUserInfo(get_data) }) </script></body></html>Umeionaje Makala hii.. ?
👉1 ai web app 👉2 Bongolite - Game zone - Play free game 👉3 Kitabu cha Afya 👉4 Kitau cha Fiqh 👉5 Sira ya Mtume Muhammad (s.a.w) 👉6 web hosting
Post zinazofanana:
JAVASCRIPT - somo la 16: Jinsi ya kutumia html form kwenye javascript
Katika somo hili utakwenda kujifunza jinsi ya ku dili na html form kwenye javascript. Javascript inaweza kufanya mengi kwenye html form.
Soma Zaidi...JAVASCRIPT - somo la 24: Jinsi ya kutengeneza online keyboard
Katika project hii utakwenda kufunza jinsi utakavyoweza kutengeneza keyboard ya online kwa kutumia javascript
Soma Zaidi...JAVASCRIPT - somo la 6: Jinsi ya kufanya mahesabu kwenye javascript
Katika somo hili utajifunza kuhusu matendo ya hesabu ambayo ni kugawanya, kujumlisha, kuzidisha na kutoa
Soma Zaidi...JAVASCRIPT - somo la 9: Jinsi ya kuandika function kwenye javascript
Katika somo hili utakwenda kujifunza jinsi ya kuandika function kwenye javascript. Utajifunz apia namna ya kuitumia function hiyo
Soma Zaidi...JAVASCRIPT - somo la 5: Jinsi ya kupangilia maandishi wakati wa ku output kwenye javascript
Katika somo hili utajifunza jinsi ya kupangilia muonekano wa maandishi (text) wakati wa ku out put matokeo ya code
Soma Zaidi...JAVASCRIPT - somo la 18: Jinsi ya kutumia switch case kwenye javascript
Kwa kutumia mfano huu na iliyotangulia unaweza kuweka masharti kadiri uwezavyo. Tukutane somo linalofuata tutajifunza kuhusu switch statement.
Soma Zaidi...JAVASCRIPT - somo la 20 Jinsi ya kutumia foOfloop kwenye javascript
Katika somo hili utajifunza jinsi ya kutumia forOfLoop. Hii ni aina ya loop ambayo yenyewe inahusisha item zote kwenye array.
Soma Zaidi...JAVASCRIPT - somo la 2: Jisi ya ku print output ya code za javascript.
Katika somo hili utakwenda kujifunza jinsi ambavyo utaweza ku display matokeo ya code za javascript.
Soma Zaidi...JAVASCRIPT - somo la 21: Jinsi ya kutumia while loop na do while loop
Katika somo hili tutakwenda kujifunza khusu while loop na do while loop.
Soma Zaidi...JAVASCRIPT - somo la 11: function maalumu zinazotumika kwenye string yaani string method
Katika somo hili utakwenda kujifunza baadhi ya function maaumu zinazotumika kwenye string yaani string method.
Soma Zaidi...