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 Kitabu cha Afya 👉2 Kitau cha Fiqh 👉3 Simulizi za Hadithi Audio 👉4 kitabu cha Simulizi 👉5 Dua za Mitume na Manabii 👉6 web hosting
Post zinazofanana:
JAVASCRIPT - somo la 15: Jinsi ya kukusanya user input
Katika somo hili tutakwenda kujifunza kuhusu user input. Somo hili litaangalia html form na attribute zake na jinsi zinavyohusiana na user input. Mwisho wa somo hili utaweza kutengeneza simple Calculator kwa kutumia javascript.
Soma Zaidi...JAVASCRIPT - somo la 22: Jinsi ya ku set time na tarehe
Katika somo hili tutakwenda kujifunza kuhusu ku set time. Yaani tutaweka muda ambao code zinatakiwa ndio zilete matokeo.
Soma Zaidi...JAVASCRIPT - somo la 14: Jifunze kuhusu event kwenye javascript
Katika somo hili utakwenda kujifunza kuhusu javascript events. Event ni neno la Kiingereza lenye maana tukio wingi wake events kumaanisha matukio. Natumia ni kila ambacho kinatokea kwenye javascript.
Soma Zaidi...JAVASCRIPT - somo la 7: Jinsi ya kutumia logical operator kwenye javascript
Katika somo hili utakwenda kujifunza jinsi ya kutumia logical operator kwenye javascript. Katika somo hili tutakwenda kutumia mahesabu.
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 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...JAVASCRIPT - somo la 10: Jinsi ya kuandika object na matumizi yake kwenye javascript
Ksomo hili litakwenda kukufundisha kuhusu object kwenye javascript, kazi zake na sheria zake katika kuiandika.
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 4: Jinsi ya kuandika variable kwenye javascript
Katika somo hili utajifunza jinsi ya kuandika variable. Hapa utajifunza sheria zinazohusu variable katika javascript
Soma Zaidi...JAVASCRIPT - somo la 19: Jinsi ya kutumia loop kwenye javascript
Katika somo hilibtutakwenda kujifunza kuhusu loop. Katika programming tunaposema loop tunamaanisha ile hali ya program ku excute code zaidi na zaidi. Tofauti na kurudia rudia kuandika statement moja kwa ajili ya kupata matokeoa hayohayo basi unapotumia lo
Soma Zaidi...