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 Madrasa kiganjani 👉2 Tafasiri ya Riyadh Swalihina 👉3 ai web app 👉4 Simulizi za Hadithi Audio 👉5 Kitabu cha Afya 👉6 web hosting
Post zinazofanana:
JAVASCRIPT - somo la 12: Function zinazotumika kwenye namba
Katika somo hili utajifunz kuhusu baadhi ya function ambazo hutumika kwenye namba
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 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 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 17: condition statement za if else, else if kwenye javascript
Katika somo hili tutakwenda kujifunza kuhusu condition statemant. Darasa hili ni moja katika madarasa muhimu programming. Katika somo hili tutajifunza kwa vitendo zaidi. Tutatumia mifano ya somo lililo tangulia.
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 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...Game 3: Mchezo wa kufikiria namba kwa kutumia javascript
Hii ni game ambayo utafikiria namba, ambayo inatakiwa iwe sawa na namba ambayo game imeiweka.
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...Game 2: Jinsi ya kutengeneza tic toc game ya single player kwa kutumia javascript, html na css
Katika post hii utakwenda kujifunza kutengeneza game ya tic toc ya mchezaji mmoja na kompyuta yaani single player
Soma Zaidi...