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>