Offline data handle kwa kutumia javascript

Katika somo hili tutaenda kujifunza namna ya kuhifadhi taarifa za mtumiaji endapo mtandao utakuwa haupo ()

Jiunge nasi WhatsApp

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>

Katika eneo hili <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.

Tazama Code nzima hapa

<!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>

<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>

Jiunge nasi WhatsApp kupata update zetu

Jiunge nasi WhatsApp

Zoezi la Maswali

Nyuma Endelea

Umeionaje Makala hii.. ?

Author: Emmanueli

Tarehe: 2025-12-27 19:24:12 Topic: JavaScript Main: Masomo File: Download PDF Views 655

Share On:

Share follows: 0 | Unique share links followed: 0

Sponsored links
👉1 Kitabu cha Afya 👉2 Madrasa kiganjani 👉3 Dua za Mitume na Manabii 👉4 Bongolite - Game zone - Play free game 👉5 Tafasiri ya Riyadh Swalihina 👉6 Kitau cha Fiqh

Post zinazofanana:

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 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 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 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...

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 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...