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.. ?
Share On:
👉1 Tafasiri ya Riyadh Swalihina 👉2 Bongolite - Game zone - Play free game 👉3 Dua za Mitume na Manabii 👉4 Simulizi za Hadithi Audio 👉5 Kitabu cha Afya 👉6 Kitau cha Fiqh
Post zinazofanana:
JAVASCRIPT - somo la 23: Jinsi ya kutengeneza calculator yaani kikokotoo cha hesabu kwa kutumia javascript
Katika somo hili utakwenda kujifunza jinsi ambavyo utaweza kutumia javascript kutengeneza kikokotoo cha hesabu yaani calculator
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 1: Kwa nini ni muhimu kujifunza javascript
Katika somo hili utajifunza kuhusu historia ya javacsript pamoja na kazi za javascript. Pia utayajuwa makampuni makubwa yanayotumia javascript.
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 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...Game 1: Jinsi ya kutengeneza game ya tic toc ya wachezaji wawili kwa kutumia html, css na javascript
Katika post hii utakwenda kujifundisha jinsi ya kutengeneza game ya tic toc ya wachezaji wawii kwa utumia html, css na javascript
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...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 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 3: sheria za uandishi wa code za javascript yaani syntax za javascript
Katika somo hili utakwenda kujifunza sheria ama syntax za kuandika javascript. Hii itakuwezesha kuelwa zaidi code za javascript.
Soma Zaidi...