Offline data handle kwa kutumia javascript

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:

 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:

  1. Kusoma data ya mtumiaji

  2. Kuthibitisha kama imejazwa vizuri

  3. Kukagua kama mtandao upo

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

 
const form = document.getElementById('my_form')

Hii inamaanisha:

"Nipe element ya HTML yenye id = my_form"

HATUA YA 3: KUSIKILIZA TENDO LA MTUMIAJI

 
form.addEventListener('submit', function(ev) { ... })

Hii inamaanisha:

"Mtumiaji akibonyeza Send, fanya kazi fulani."

 HATUA YA 4: KUSOMA TAARIFA KUTOKA HTML

 
let user_name = document.querySelector("#user_name").value

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:

 
let email = document.querySelector("#email").value

 HATUA YA 5: KUHAKIKI DATA

Kabla ya kufanya lolote, mfumo unasema:

"Je, data imejazwa?"

 
if (user_name.trim() === "") { ... }

Hii huzuia fomu tupu.

 HATUA YA 6: KUANGALIA HALI YA MTANDAO

 
if (!navigator.onLine) { ... }

Hii ndiyo akili ya mfumo:

Hali Hatua
Mtandao upo Tuma data
Mtandao haupo Hifadhi data

 HATUA YA 7: KUHIFADHI DATA

 
localStorage.setItem('pendingData', JSON.stringify(userData))

Tunaiambia browser:

"Hifadhi data hii mpaka nitakapoirudia."

 HATUA YA 8: KUTUMA DATA MTANDAO UKIRUDI

 
window.addEventListener('online', function() { ... })

Browser inaposema:

"Sasa nina mtandao"

Mfumo unasema:

"Angalia kama kuna data iliyohifadhiwa, itume."

 HATUA YA 9: KUSAFISHA BAADA YA MAFANIKIO

 
localStorage.removeItem('pendingData')

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

Una swali? Nicheki WhatsApp
Zoezi la Maswali

Nyuma Endelea


Umeionaje Makala hii.. ?

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

Share On:

Share follows: 0 | Unique share links followed: 0
Sponsored links
👉1 Madrasa kiganjani     👉2 web hosting     👉3 Bongolite - Game zone - Play free game     👉4 Kitau cha Fiqh     👉5 Dua za Mitume na Manabii     👉6 kitabu cha Simulizi    

Post zinazofanana:

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