PROJECT ZA MAFUNZO LEVEL 1

<
PROJECT YA MAFUNZO YA HTML LEVEL 1



<!DOCTYPE html>
<html lang="en">
<head>
              
              
    <meta name="viewport" content="width=device-width, initial-scale=1">
                <meta charset="UTF-8">
                <title>Home Page</title>
</head>
<body>
                <body style="background-color:lightblue">
                                <menu style="background-color:violet">
                                        <a href="android.html"><button>Android</button></a>   
                                      
                                        <a href="html.html"><button>Html</button></a>
                                                <a href="video.html"><button>Video</button></a>
                              
                                <a href="contact.html"><button>Contact</button></a>
    </menu>                       
                              
<img src="image/p4.jpeg" width="100%">

<h1><u>Welcome to our website</u></h1>

<p style="text-align:justify">Hii ni website ambayo ni demo kwa ambao wameshiriki mafunzo ya <b>HTML</b>. Mafunzo haya yameendeshwa kwa njia ya simu kwa kutumia App inayoitwa <mark>TrebEdit</mark></p>  
<p>Katika mafunzo haya utajifunza mambo yafuatayo:- <br><br>
HTML:<br>

<b style="color:red">H</b>yper<br>

<b style="color:violet">T</b>ext<br>

<b style="color:yellow">M</b>arkup<br>

<b style="color:red">L</b>anguage<br>


<p style="background-color:black">
                <i style="color:white">mafunzo haya
              
                yamekujia kwa ihsani ya:</i><br><br>
              
</p>

<h3 style="text-align:center"><b style="color:black"><a href="bongoclass.com">bongoclass.com</a></b></h3>
                          
                              
                </body>
</body>
</html>

PROJECT YA MAFUNZO YA HTML LEVEL 2

PROJECT YETU YA MWISHO KULINGANA NA COURSE:
Huu ni ukurasa wa mbele wa tovuti (landing page) ndio ukurasa mkuu. Ukurasa huu umegawanyika katika sehemu kuu nne. Ukurasa huu umedizaidiwa kulingana na mafunzo ambayo yamefundishwa. Ni matarajio yetu katika muendelezo wa mafunzo haya ukurasa huu utaboreshwa zaidi. Sasa hebu tuone ukurasa huu:-

1.Sehemu ya kwanza ni <head> hapa ndipo amabapi metadata zipi. Kuna jina la mwandishi, na muhutasari, na pia kuna title ya kurasa. Character set iliyotumika ni 8.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="Rajabu">
<meta name="description" content="Mafunzo ya HTML, FULL COURES FOR BEGINNERS">
<title>Home Page</title>
</head>

2.Sehemu ya pili ni <header> hapa ndipo ambazo kuna menu. Menu imetengenezwa kwa batani pamoja na hypertext reference kwa ajili ya kuwekea link za kwenye menu. Background color ya menu ni black. Pia ukubwa wa batani ji x-large kwa maana batani zimekuzwa ukubwa.

3.Sehemu ya tatu ni section <div> hii imegawanyika katika row tatu. Kila row imezungushiwa na batani. Rangi ya batani ni ya kijani.ukubwa wa kila row ni 33.32%. rangi ya maandishi ni nyeusi. Style iliyotumika ni ya nje na ndani. Row hizi 3 zitavunjika na kila moja kukaa kivyake endapo ukurasa utafunguliwa kwenye simu. Hivyo kila row itakuwa na upana wa 100%. hii imefanya na @media screen and (max-width: 600px) {
div {width: 100%;}
<div class="left">
<button class="button"><h1>ABOUT US</h1>Sisi ni grupu la Fb tunaotoa mafunzo bure juu ya kutengeneza blog na website pamoja na Android App.</button>
</div>
<div class="middle">
<button class="button"><h1>WHO WE ARE</h1>Sisi ni kundi linalotoa elimu ya Teknolojia bure. Tunafanya hivi kwa kushirikiana na wadau wengine</button>
</div>
<div class="right">
<button class="button"><h1>WHAT WE DO</h1>Tunafundisha jinsi ya kutengeneza Website, Blog na Android App. Tunafanya haya bila ya kudai malipo yoyote yale</button>
</div>

4.Sehemu ya mwisho ni section <main> hii imekusanya maelezo ya kuhusu tovuti hii. Section hii itakuja chini ya section iliyopita. Mpangilio wa text ni center. Style zaidi zilizotumika imechukuwa style ya paragraph zilizotumika huko juu
<main>
<h1 style="text-align: center;">KUHUSU SISI</h1>
<p style="text-align: justify;">Sisi ni wadau wa teknolojia. Tumejitolea kufundishana na kufahamishana zaidi katika teknolojia hususani katika lugha za kikompyuta. Project hii ni project ya pili katika course yetu ya HTML level ya pili. Tunatarajia katika level ya tatu kuboresha project hii kuwa nzuri zaidi. Unaweza kuangalia project yetu ya kwanza kwenye link ya project hapo juu<br><br>

Ni matarajio yetu kuwa project hizi ni mja ya njia za kuonjesha maendeleo yetu katika kujifunza. Hatuta ishia hapa. Malengo yetu ni kujuwa zaidi namna ya kutumia lugha za kikompyuta kuweza kufanya mengi. Lengo letu ni kusaidia jamii katika haya tutakayoyasoma. Tunatarajia kutengeneza project ambazo zina malengo ya Kusaidia jamii kwa ujumla. <br><br>
Tafadhali kama na wewe ni mdau wa teknolojia tunaomba usaidie katika kutuunga mkono kwa mawazo na kifedha kama utakuwa na wasaa.<br>
</p>
<br><br><h1 style="text-align: center; font-size: 100%;">Welcome All</h1><br><br><br>
</main>

5.Section <footer> hii ndio sehemu ya mwisho ya ukurasa huu. Sehemu hii ipo ndani ya <footer> zaidi sehemu hii imeonyesha nyia za kuwasiliana nasi.background color ni gray, hivyo maandishi nimeyaweka kuwa meupeiki kuendana na rangi. Rangi ya link haikubadilishwa.

CODE ZAOTE NI HIZI


        <html>

        <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <meta name="author" content="Rajabu">

        <meta name="description" content="Mafunzo ya HTML, FULL COURES FOR BEGINNERS">

        <title>Home Page</title>

        </head>

        <body>

        <style>

        menu {background-color: black;}

        a {color: blue;

        text-decoration: none;

        }

        button {font-size: x-large;}

        .left {float: left; }

        .middle {float: left;}

        .right {float: right;}

        .button {background-color: green;}

        div {color: black; width: 33.32%;}

        @media screen and (max-width: 600px) {

        div {width: 100%;}

        }

        </style>

        <header>

        <menu>

        <button><a href="#">COURSES</a></button>

        <button><a href="#">EXAMS</a></button>

        <button><a href="#">PROJECTS</a></button>

        <button><a href="#">BLOG</a></button>

        <button><a href="#">CONTACTS</a></button>

        </menu>

        </header>

        <div class="left">

        <button class="button"><h1>ABOUT US</h1>Sisi ni grupu la Fb tunaotoa mafunzo bure juu ya kutengeneza blog na website pamoja na Android App.</button>

        </div>

        <div class="middle">

        <button class="button"><h1>WHO WE ARE</h1>Sisi ni kundi linalotoa elimu ya Teknolojia bure. Tunafanya hivi kwa kushirikiana na wadau wengine</button>

        </div>

        <div class="right">

        <button class="button"><h1>WHAT WE DO</h1>Tunafundisha jinsi ya kutengeneza Website, Blog na Android App. Tunafanya haya bila ya kudai malipo yoyote yale</button>

        </div>

        <main>

        <h1 style="text-align: center;">KUHUSU SISI</h1>

        <p style="text-align: justify;">Sisi ni wadau wa teknolojia. Tumejitolea kufundishana na kufahamishana zaidi katika teknolojia hususani katika lugha za kikompyuta. Project hii ni project ya pili katika course yetu ya HTML level ya pili. Tunatarajia katika level ya tatu kuboresha project hii kuwa nzuri zaidi. Unaweza kuangalia project yetu ya kwanza kwenye link ya project hapo juu<br><br>
    Ni matarajio yetu kuwa project hizi ni mja ya njia za kuonjesha maendeleo yetu katika kujifunza. Hatuta ishia hapa. Malengo yetu ni kujuwa zaidi namna ya kutumia lugha za kikompyuta kuweza kufanya mengi. Lengo letu ni kusaidia jamii katika haya tutakayoyasoma. Tunatarajia kutengeneza project ambazo zina malengo ya Kusaidia jamii kwa ujumla. <br><br>

        Tafadhali kama na wewe ni mdau wa teknolojia tunaomba usaidie katika kutuunga mkono kwa mawazo na kifedha kama utakuwa na wasaa.<br>

        </p>

        <br><br><h1 style="text-align: center; font-size: 100%;">Welcome All</h1><br><br><br>

        </main>

        <style>

        footer {background-color: grey;}

        b {color: darkblue;}

        p {text-align: center;}
    </style>

        <footer>

        <p style="color: white;">Masomo haya yamedhaminiwa na bongoclass.com. Tunatarajia kila tutakapomaliza course kuifanyia project. Hivyo project itakayofata baada ya hii tunatarajia iwe na ubora zaidi.

        <h1 style="text-align: center;">WASILIANA NASI </h1>

        <p>

        <a href="mailto:[email protected]"><b>Email</b></a>&nbsp;&nbsp;&nbsp;

        <a href="#"><b>Youtube</b></a>&nbsp;&nbsp;&nbsp;

        <a href="#"><b>Facebook</b></a>&nbsp;&nbsp;&nbsp;

        <a href="#"><b>Twitter</b></a>&nbsp;&nbsp;&nbsp;

        <a href="#"><b>instra</b></a></p><br><br><br>

        <h1 style="text-align: center; font-size: 100%;">@bongoclass.com</h1>

        </footer>

        </body>

        </html>

Kama utataka kuhost code hizi pitia masomo yetu yaliyopita utajifunza jinsi ya kuhost bure. Cheki video hii https://www.youtube.com/watch?v=JyHtRDK7QUI

MWISHO WA COURSE:
Huu ndio mwisho wa course hii. Itafuatiwa na HTML ADVANCED COURSE FOR BEGINNERS. Pia tunatarajia course hii itakwenda pamoja na CSS na JAVASCRIPT. Endelea kuwa na si kupata masomo mengine ya PHP na SQL.

PROJECT ZA MAFUNZO YA PHP LEVEL 1

Kama ulivyokwiisha kutambuwa kuwa katika kila baada ya kumaliza course tunaleta poject. Project hizi zitakusaidia mshiriki wa mafunzo haya kuweza kuelewa zaidi na kufanyia kazi kile ambacho kime fundhishwa. Hapa nitakuletea project tano ambazo ni:-

1. Kikokotoo cha hesabu (Simple calculator with php and html)

2. Kikokotoo cha umri (age calculator with php)

3. Code playground (HTML, CSS and JAVASCRIPT code playground with php)

4. Dodoso la usajili (databaseless registration form).

5. Kuhesabu idadi ya maneno kwenye sentensi ama paragraph

Project hizi ni program fupifupi ambazo zina msingi mzuri kwa mwenye kuanza. Uzuri wa project hizi zote ni za level ya chini ssana kiasi kwamba kama ulishiriki kwenye mafunzo yetu hazitakushinda. Kama ukipata ugumu tafadhali rudia somo lililotangulia la 11 katika mafunzo haya.

1. KIKOKOTOO CHA HESABU

Program hii itakuwa inafanya kaz ka ma kikokotozi yaani calculator. Yenyewe itahusika na matendo manne ya hesabu yaani kujumlisha, kuzidisha na kugawanya. Mtumiaji atahitajika kuingiza namba, tendo (+, *, - au /) kisha ataingiza namba nyingine, atabofya submit kisha atapata majibu.

Program itakusanya data zake kwa kutumia HTML form kisha itatuma namba atakazoingiza mtu kwenye variable za php. Kwa kutumia switch case utaweza kuchaguw tendo. Tafadhali pitia somo la 10 kwenye mafunzo haya upate kujifunza zaidi kama hujaelewa kuhusu switch case.

CODE ZA PROGRAM

<html>
<form method="post" action="">
<label>KIKOKOTOZI:</label><br>
    <input type="number" name="a" placeholder="0"><br>
    <input type="text" name="b" placeholder=""><br>
    <input type="number" name="c" placeholder="0"><br>
    <br><br><input type="submit">
</form></html>
<?php
$a=$_POST['a'];
$b=$_POST['b'];
$c=$_POST['c'];
$result = "";





switch ($b) {
    case "+":
        $result = $a + $c;
        break;
    case "-":
        $result = $a - $c;
        break;
    case "*":
        $result = $a * $c;
        break;
    case "/":
        $result = $a / $c;
}
?>
<p>
    <input readonly="readonly" name="result" value="<?php echo $result; ?>">
</p>

2. DODOSO LA USAJILI

Katika program hii mtumiaji ataweza taarifa zake kisha zitakuja kama alivyoziweka. Program hii itakusaidia utakapokuja kujifunza namna ya kudisplay taarifa kutoka kwenye database. Kwa sasa hatutatumia database ila somo litakalofata taarifa hizi moja kwa moja zitatola kwenye database baada ya mtu kujiajili.

Program hii itatumia mafaili mawili. Moja ni la HTML kwa ajili ya kukusanya madodoso. Kisha faili lingine litakuwa ni kwa ajili ya kudisplay taarifa zilizojazwa. Katika faili la HTML kwenye action utakuta kuna link ya faili linalofata ambalo ndilo litakalopelekewa taarifa zilizojazwa kwa ajili ya kuchakatwa.

Ijapokuwa unaweza kuchanganya mafaili haya sehemu moja ;akini nimependelea kuyatengenisha kwa ajili ya kujifunza zaidi. Hivyo kama ndio na wewe unaanza weka mafaili mawili. Kisha faili m,oja ni la htm;l code na la pili ni kwa ajili ya php code.

Katika program hii faili la kwanza nimeliita p2.php ambalo litabeba php code na la pili p.php ambalo litabeba hyml code

CODE ZA PROGRAM

p.php

<html>
<form method="post" action="p2.php">
<label>Sensa ya watu na makazi</label><br>
    <input type="text" name="a" placeholder="Weka jina lako hapa"><br>
    <input type="text" name="b" placeholder="Umri"><br>
    <input type="text" name="c" placeholder="Jinsia"><br>
    <input type="text" name="d" placeholder="Unapoishi"><br>
    <input type="text" name="e" placeholder="Hali ya ndoa"><br>
    <input type="text" name="f" placeholder="Elimu"><br>
    <br><br><input type="submit">
</form></html>

p2.php

<?php

$a=$_POST['a'];
$b=$_POST['b'];
$c=$_POST['c'];
$d=$_POST['d'];
$e=$_POST['e'];
$f=$_POST['f'];
$t = date("Y/m/d/l");
echo "<p>Karibu sana  <b>$a</b></p> <br><br> <u><b>Na hizi ndio Taarifa zako ulizojaza kwenye Sensa hii:-</b></u><br>";
echo "Jina: $a <br>";
echo "Umri: $b <br>";
echo "Jinsia: $c <br>";
echo "Unapoishi $d <br>";
echo "Hali ya Ndoa: $e <br>";
echo "Elimu: $f <br>";
echo "Siku ya kuandikishwa: $t"

?>

3. KIKOKOTOZI CHA UMRI

Katika program hii mtumiaji atatakiwa kuwka mwaka wake aliozaliwa kisha program itamtajia idadi ya miaka yake. Program imetengenezwa kwa kutumia kwaka 2021. yaani mtu akiingiza mwaka aliozaliwa program itachukuwa mwaka 2021 kisha itatoa huo mwaka na kupata miaka ya hiyo mtu.

Kwa mfano mtu akiingiza mwaka 2000 program itafanya 2021 - 200 = 21 hivyo idadi ya miaka ni 21. unaweza kimodify program hii kwa kutumia function date() ili iweze kuendana na muda, yaani itakuwa inachukuwa muda wa sasa. Mfano ifikapo 2022 program hii haitasema ukweli lakini kwa kutumia function date() haina aja ya kubadili 2021 kuweka 2022

CODE ZA PROGRAM

<html>
<form method="post" action="">
<label>KIKOKOTOZI CHA UMRI:</label><br>
    <br><br>
    <label>Weka mwaka uliozaliwa</label><br>
    <input type="number" name="a" placeholder="0"><br>
    <br><br><input type="submit">
</form></html>
<?php
$a = $_POST['a'];
$c= "2021";
$b = $c - $a;
echo "Una miaka $b";

4. CODE PLAGROUND

Kwa kutumia program hii utaweza kuandika code za html, css na javascript kwenye program hii na kupata matokeo yake yaani preview. Program hii itakusaidia katika kufanya preview ya code zako kujuwa kama umepatia ama laa. Chukulia mfano unaandika <h1>hi</h1> program hii itaonyehsha hi yaani kile ambacho kitapatikana baada ya hizo code za html

Kwa kutumia html form <textarea> mtu ataweza kuandika code zake kwenye uwanja huo. Kisha akibofya submit anapata matokeo. Tafadhali kama hujaelewa kwenye fomu za html ana text area rejea course ya kwanza na pili za html.

CODE ZA PROGRAM

<html>
<h1>Code playground</h1>
<form method="post" action="">
<textarea name="a" placeholder="weka code za html hapa"
          style="width: 350px;height: 200px;">
</textarea>    <br><br><input type="submit">
</form></html>
<?php
$a = $_POST['a'];

echo  $a;

5. PROGRAM YA KUHESABU MANENO

Fikiria kwa mfano umetoa interview kwa watu 100, na umewataka wajieleze kwa maneno yasiyopunguwa 300. na wote wameandika, hivi utaweza kweli kuhesabu watu wote kuhakikisha kuwa wameandika maneno mangapi?. hapa utahitaji program itakayokuwezesha kuhesabu maneno walioandika.

Kwa kutumia program hii utaingiza sentensi ama paragraph au ahabari kisha ukibofya submit unaletewa idadi ya maneno yaliyokuwemo. Hapa nimetumia functino str_word_count() ni php function ambayo tumejifunza katika somo la 5. tafadhali kama utapata ugumu rejea somo la tano.

CODE ZA PROGRAM

<html>
<h1>HESABU IDADI YA MANENO</h1>
<form method="post" action="">
<textarea name="a" placeholder="sentensi ama paragraph hapa"
          style="width: 350px;height: 200px;">
</textarea>    <br><br><input type="submit">
</form></html>
<?php
$a = $_POST['a'];
echo "Idadi ya maneno ni:-";
echo str_word_count("$a");
?>

MWISHO WA COURSE

Mpaka kufikia hapa course ya php level 1 ndio nimeifunga. Tafadhalituachie maoni yako ili kuweza kuboresha masomoyetu zaidi na utoaji wa masomo haya. Usiwache kuwa nami kwenye level 2 ya php ambapo tutajifunza zaidi katika yale ambayo tumeyawacha na tutakwenda kuyaona.

Kumbuka course zetu ni bure na hatuhitaji malipo yeyote kutoka kwako. Hata hivyo kama utahitaji kufundishwa wewe binafsi nje ya haya mafunzo ya bure bei zetu ni 25,000 kwa kila course. Malipo yatatkiwa kutoka baada ya kusoma vipindi 2. yaani utakuwa na free kwa vipindi 2 kuangalia kama utaridhia na somo na ufundishwaji.

Mafunzo haya yanakujia kwa ihsani ya bongoclass

Web: www.bongoclass.com

Email:[email protected]

Phone: 0774069753 unaweza kunicheki wasap kwa link hii https://wa.me/message/7CTQP5BSWBR5I1

Je una maswali, maoni ama ushauri, tutumie sms ✉ bodya hapa hapa, ama wasiliana nasi kwa WhatsApp 💧 bofya hapa

Post Nyingine

MAFUNZO YA HTML LEVEL 2

MAFUNZO YA PHP LEVEL 1

MAFUNZO YA HTML LEVEL 1

MAFUNZO YA DATABASE

PROJECT ZA MAFUNZO LEVEL 1

MAFUNZO YA PHP LEVEL 2

MAFUNZO YA PHP LEVEL 3 SOMO LA 1