Bootstrap 4 crash course (Mpaka mwisho)

[Kuchwizzy]

BOOTSTRAP 4 INTRODUCTION
Hello Coders,
Leo nimeona ni share na newbies wanaoanza careers zao kama front end developers
Course hii inakuhitaji uwe na angalau basic knowledge ya HTML ,CSS na Javascript
Na pia wana experience ya kutumia text editors kama Atom au VS Code
Ila nitajitahidi kwenda pia na wale ambao hawana knowledge yoyote ile


Let's get it started.......
Kwa complete Beginners..

What is front end?

Nini maana ya front end?
Web application yoyote ile imeundwa na sehemu kubwa tatu
Tuna

1. Front end
2. Backend
3. Database

Front end:
Huu ni muonekano wa nje wa web au mobile application yako
Inajumuisha chochote kile ambacho mtumiaji(user) wa application yako anaweza ku interact nacho
Kwa mfano,mda wowote tunapofungua browser zetu probably huwa tunakutana na hii interface

Hii ni front end ya Google
Muonekano wa nje ambao unamuwezesha mtumiaji ku interact na complex system nzima ya Google

Back end:
Ni part ya application ambayo sisi kama watumiaji wa Google Search Engine hatuwezi kuiona
Ni inside part ya application ambayo ina controll mfumo mzima wa google.com,
Tunaiita Backend kwasababu inafanya kazi nyuma ya pazia(In the background)

Tunapo type kitu chochote kwenye search input ya google.com,mfumo huu unachukua input yetu
(Search query) na kutafuta katika Database ya Google website zote zenye majibu ya kile ulichokitafuta katika mpangilio maalum(Google Ranking)

Database:
Hii ni part ya web application inayofanya kazi ya kuhifadhi data(taarifa) zote za application yetu
Kwa mfano wetu wa Google,hii ni Google Data Center

Developers wenye skills tu na front end programming hawa tunawaita front end developers
Na developers wenye skills tu za backend development hawa tunawaita Back end developers

Na wale wenye skills zote hizi hawa ni Full stack developers...

Programming ni nini?
Kwa lugha rahisi na nyepesi, Programming ni sayansi ya kuzungumza na computer
Unaiambia computer nini ifanye kwa kutumia lugha maalum ambazo tunaziita programming language
(Hii ni intro fupi tu ya nini tunaenda kufanya,ila kama unataka kujua zaidi kuhusu programming
nitaweka useful links ambazo zitakusaidia ku dive deep kwenye hii career.....

TEXT EDITORS
Hizi ni special application ambazo tunazitumia kuandika codes zetu
Kwa wale ambao hatujawahi kutumia application kama hizi,hapo chini niweka links
ambazo zitakuwezesha ku download na ku install Text Editors kwenye Pc yako
Ni simple,
Download VS Code (Recommended)
Atom(Kama una prefer simplicity)

BOOTSTRAP
Tumezungumza kuhusu front end na mpaka sasa angalau tunajua maana ya front end..
Sasa tuzitazame front end languages na kwanini kuna kitu kama Bootstrap

Kwa complete beginner
Front end languages ni zile languages zote zinazotumika kutengeneza front end ya application yako ama User Interface kwa jina jingine
Front end languages maarufu ni kama
HTML,CSS, & Javascript

HTML:
Hii ni mark up language tunayoitumia ku structure user interface yetu
Kuwa hapa ni heading,hii ni title,hii ni footer ect

CSS:
Hii ni styling language,tunaitumia kupendezesha muonekano wa User Interface yetu

Javascript:
Hii ni scripting language,tunaitumia ku add dynamic functionalities katika User Interface yetu(UI)

Kwa complete beginners nitaanda uzi special kwa ajiri ya hii topics

SO WHAT IS BOOSTRAP

Modern web application kwa sasa huwa zinatumia framework....
Framework ni mkusanyiko wa reusable components ambazo unaweza kuzitumia katika application yako tena na tena
The fundamental principle ya programming ni DRY
yaani "Dont Repeat Yourself"
Kwa mfano unaweza kupewa kazi ya ku design website

Websites zote normally zina navbar, header,button,card,footer ,forms,input,alert etc
Hizi ni common components ambazo utazihitaji tena na tena kwa kila projects utakayofanya

Ukiwa na project nyingi zenye dead lines,utagundua ugumu uliopo
kuwa kila project itabidi u design hizo components tena
Hii ni kupoteza mda na mara nyingi ni pain kwa front end developer

Na hapa ndipo front end framework kama Bootstrap zinapokuja
Bootstrap inachofanya ni ku provide hizo common web components out of box..
Kwa hio hauna haja ya ku design navbar,button,form,card,footer kwa kila application yako

Pia uzuri wa kutumia framework kama Bootstrap ni kuwa inakuwezesha ku design modern UI ndani ya mda mfupi na kwa kuandika codes chache

Mfano:
Hii ni Navbar bila framework yoyote....
navbar(bila Bootstrap)

Unaweza design Navbar components nzuri zaid ya hio kwa kutumia fewer codes zaidi..
Bootstrap Navbar

Sasa ni mda wa kuichimba Bootstrap kwa undani wake......Lets take break
(Contact:255 748333586)

 

[Kuchwizzy]

Bootstrap 5 is out

 

[Patiee]

Bootstrap 5 is out

I have a problem brother(apart from bootstrap). Nataka ni load page content dynamically baada ya user ku click nav link asiwe directed kwenye page nyingine badala yake hiyo content ya kwenye link iwe loaded kwenye target div.
Nimefanya kwa ajax so far naona bado nakuwa directed kwenye page nyingine.
Codes zangu, Mfano

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>

    <meta charset="utf-8">

    <title>Page</title>
  </head>
  <body>
    <div class="header">
      <p> welcome page</p>
</div>
      <nav>
        <ul>
          <li><a href="home.html">home</a> </li>
          <li> <a href="about.html">About</a> </li>
        </ul>
      </nav>
      <p>Hello page</p>

      <div id="content">
        <p>Content is loaded here</p>
      </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("nav ul  li a").click(function(e){
      e.preventDefault();
      var url = $(this).attr('href'); //pata link yenye unataka uchukue data zake
      $.ajax({
       type: 'GET',
       url: url,
       success: function(data) {

          $("#content").html(data);
      }
     });
   });
});

</script>
  </body>
</html>

Msaada tafadhali
mathsjery Detective J

 

[mathsjery]

Patiee

Unapotaka kuload content dynamically(From database) tumia njia ifuatayo.

ILA NABASE KWENYE SWALI LAKO, HAKUKUWA NA UMUHIMU WA KUWEKA EVENT LISTENER KWA KILE UNACHOTAKA.

Ajax itaload content automatically unaporequest data za page husika.

mfano kama utafungua url ya home page(lakini hii ipo by default kama index page). Ajax itakupa data pindi unapo request page hiyo sio kwa sababu umeclick bali kwa sababu ulisha request directly(no event listener), namaanisha hivi kama user atafungua home page na wewe kama developer ulitumia event listener mfano onclick, basi page itakuwa blank mpaka aki click kwenye home link, hii haingii akilini(lakini kama unamaanisha hivyo nitakuonyesha ukitaka, hapa ntafanya kama nilivyoelewa, utauliza baadae)

Hivyo basi lazima page i load data kutoka kwenye server kwenda kwenye page kama kama kawaida bila event listener otherwise labda kuna sub elements ambazo unataka mtu aki click button/link imwonyesh kitu flani(kama nilivyosema hapo awali).

lakini ninavyoona hapa ni tofauti na entire page(Yaani page nzima na data zake).



SOLUTION KWA HOME PAGE ONDOA EVENT LISTENER:

            $.ajax({
                url: 'hapa weka url ya page yenye data/inayoload data kwenye server i.e yaweza kuwa json file, php n.k',
                type: 'GET', //tunatumia get method kupata data
                dataType: 'json', // tunabeba data in the form of json ili iwe rahisi kuziweka katika structure yoyote iwe table or somesthing else
                success: function(data) {
                    $("#content").html(data); tunatupia data kama zilivyo kwenye element bila kujali structure, lakini hiyo id iwe unique iite #home-content badala ya #content
                }
            });-

Kwa page ya about page napo andika script kwa ajili ya kuload data, yaani copy na paste hio ya juu, kisha badili url uweke ile inayoload data zinazotakiwa kukaa kwenye about page na badili id iwe #about-content.


NB:
Kama unataka iwe kama single page utasema baadae, lakini je, umesoma bootstrap? unazifahamu nav-tabs au react.js unafahamu routing?

Fanya kwanza hii ukifanikiwa ntakuonyesha namna ya kuload
data zote kwa kutumia single url(no double script).

 

[Kuchwizzy]

I have a problem brother(apart from bootstrap). Nataka ni load page content dynamically baada ya user ku click nav link asiwe directed kwenye page nyingine badala yake hiyo content ya kwenye link iwe loaded kwenye target div.
Nimefanya kwa ajax so far naona bado nakuwa directed kwenye page nyingine.
Codes zangu, Mfano

DOCTYPE html>









welcome page



[LIST]

[*]home

[*]About

[/LIST]


Hello page



Content is loaded here

Msaada tafadhali
mathsjery Detective J

I think kama nimekupata vizuri....unahitaji Single Page Feeling kwenye Website yako....

Yaani data ziwe updated automatically on the same page....

Apart from solution aliyotoa mathsjery hapo juu...

Unaweza design single page application kwa urahisi mno kama utatumia Vuejs au React ...

Cause unakua na full power JavaScript in your hand....

Na ni rahisi zaidi ku achieve unachotaka.....Nita share solution yangu kesho...hapa nitakuwekea link

 

[intelinside]

Rahisisha kazi ya ku load content kwenye specific div, tumia jQuery ina function ya load()

I have a problem brother(apart from bootstrap). Nataka ni load page content dynamically baada ya user ku click nav link asiwe directed kwenye page nyingine badala yake hiyo content ya kwenye link iwe loaded kwenye target div.
Nimefanya kwa ajax so far naona bado nakuwa directed kwenye page nyingine.
Codes zangu, Mfano

DOCTYPE html>









welcome page



[LIST]

[*]home

[*]About

[/LIST]


Hello page



Content is loaded here

Msaada tafadhali
mathsjery Detective J

 

[Patiee]

Patiee

Unapotaka kuload content dynamically(From database) tumia njia ifuatayo.

ILA NABASE KWENYE SWALI LAKO, HAKUKUWA NA UMUHIMU WA KUWEKA EVENT LISTENER KWA KILE UNACHOTAKA.

Ajax itaload content automatically unaporequest data za page husika.

mfano kama utafungua url ya home page(lakini hii ipo by default kama index page). Ajax itakupa data pindi unapo request page hiyo sio kwa sababu umeclick bali kwa sababu ulisha request directly(no event listener), namaanisha hivi kama user atafungua home page na wewe kama developer ulitumia event listener mfano onclick, basi page itakuwa blank mpaka aki click kwenye home link, hii haingii akilini(lakini kama unamaanisha hivyo nitakuonyesha ukitaka, hapa ntafanya kama nilivyoelewa, utauliza baadae)

Hivyo basi lazima page i load data kutoka kwenye server kwenda kwenye page kama kama kawaida bila event listener otherwise labda kuna sub elements ambazo unataka mtu aki click button/link imwonyesh kitu flani(kama nilivyosema hapo awali).

lakini ninavyoona hapa ni tofauti na entire page(Yaani page nzima na data zake).



SOLUTION KWA HOME PAGE ONDOA EVENT LISTENER:

            $.ajax({
                url: 'hapa weka url ya page yenye data/inayoload data kwenye server i.e yaweza kuwa json file, php n.k',
                type: 'GET', //tunatumia get method kupata data
                dataType: 'json', // tunabeba data in the form of json ili iwe rahisi kuziweka katika structure yoyote iwe table or somesthing else
                success: function(data) {
                    $("#content").html(data); tunatupia data kama zilivyo kwenye element bila kujali structure, lakini hiyo id iwe unique iite #home-content badala ya #content
                }
            });-

Kwa page ya about page napo andika script kwa ajili ya kuload data, yaani copy na paste hio ya juu, kisha badili url uweke ile inayoload data zinazotakiwa kukaa kwenye about page na badili id iwe #about-content.


NB:
Kama unataka iwe kama single page utasema baadae, lakini je, umesoma bootstrap? unazifahamu nav-tabs au react.js unafahamu routing?

Fanya kwanza hii ukifanikiwa ntakuonyesha namna ya kuload
data zote kwa kutumia single url(no double script).

Nimekupata vyema mkubwa, ofcourse ninachotaka nikama ulivyoelezea, kwamba user akifungua index page directly apeleke kwenye home link(yani page isiwe blank) na aki click hizo link nyingine data iwe loaded kutoka kwenye server ije ku replace content ya home page. Mpaka hapo nimekuelewa vyema kabisa kwamba hakuna aja ya event listener.

Sasa nilipokwama kwa sasa kwenye stage hii ni kwamba nitawezaje ku upload kwa mfano file yangu ya home.php(kutoka kwenye hard drive yangu) kwenda kwenye web server(natumia apache) kisha nitapata vipi url yenye data ya home.php kutoka kwenye server nijekuitumia kwenye browser.
Naomba unipe muongozo hapa maana nime search sana google lakini sijapata suluhisho.

 

[Patiee]

I think kama nimekupata vizuri....unahitaji Single Page Feeling kwenye Website yako....

Yaani data ziwe updated automatically on the same page....

Apart from solution aliyotoa mathsjery hapo juu...

Unaweza design single page application kwa urahisi mno kama utatumia Vuejs au React ...

Cause unakua na full power JavaScript in your hand....

Na ni rahisi zaidi ku achieve unachotaka.....Nita share solution yangu kesho...hapa nitakuwekea link

Sina ujuzi wa Vue au React mkuu. Hizi framework naona zina nguvu sana kwenye front end lakini kila nikijaribu kujifunza naishia njiani kutoka na ugumu wa syntax zake.

 

[Patiee]

Rahisisha kazi ya ku load content kwenye specific div, tumia jQuery ina function ya load()

Yeah ! Jquery() .load() function ni alternative nzuri kwenye ku load content lakini tatizo langu nimegundua content niliyokuwa nataka iwe loaded haikuwa kwenye server , nilikuwa nataka ni load content ambayo iko kwenye hard drive yangu hivyo nililetewa CORS error kwenye console.

 

[Kuchwizzy]

Sina ujuzi wa Vue au React mkuu. Hizi framework naona zina nguvu sana kwenye front end lakini kila nikijaribu kujifunza naishia njiani kutoka na ugumu wa syntax zake.

Mzee try Vuejs..ni simple mno

 

[Patiee]

Mzee try Vuejs..ni simple mno

Kitabu kipi unapendekeza

 

[mathsjery]

Nimekupata vyema mkubwa, ofcourse ninachotaka nikama ulivyoelezea, kwamba user akifungua index page directly apeleke kwenye home link(yani page isiwe blank) na aki click hizo link nyingine data iwe loaded kutoka kwenye server ije ku replace content ya home page. Mpaka hapo nimekuelewa vyema kabisa kwamba hakuna aja ya event listener.

Sasa nilipokwama kwa sasa kwenye stage hii ni kwamba nitawezaje ku upload kwa mfano file yangu ya home.php(kutoka kwenye hard drive yangu) kwenda kwenye web server(natumia apache) kisha nitapata vipi url yenye data ya home.php kutoka kwenye server nijekuitumia kwenye browser.
Naomba unipe muongozo hapa maana nime search sana google lakini sijapata suluhisho.

Sija kusoma, ila nafikiri unatumia php sio?

Kama ndio, hakikisha file zote zipo kwenye directory/folder moja hata kama kutakuwa na sub folders, baada ya hapo kuna vitu vitatu unatakiwa uvizingatie,

Moja: uwe na file ambalo litakuwa ndio view yenyewe, mfano index.php
Mbili: uwe na file la javascript ambamo itaandika script kwa kutumia jQuery/Ajax.
Tatu: uwe na file ambalo hilo ndo linafetch Data kutoka kwenye database ndani ya server yako, sasa file hili ndo unatakiwa ili locate pale kwenye url ndani ya Ajax(rejea hapo juu). NB file hili lazima liwe na extension ya PHP.

Na ndani ya file hili lazima ukifetch daraja kama ni za home page basi tambua data hizi tunazitumia kwa kutumia JSON Format, na huko ndani hakikisha unaspecify content type hapa ndo hiyo CORS inapotoweka.

Kazi inayobaki ni kuaccess data na kuzitumia kwenye view(rejea hatua ya kwanza).

Hivyo utakapo load page haita load tena bali itakuwa inafetch data tu in seconds.


Sijui nimekuelewa? Na wewe umenielewa?


Other wise Kama utatumia load() Hapo utakuwa unaload page na kureplace cha ntent kitu ambacho sijui kama ndo hitaji lako.

 

[Kuchwizzy]

Kitabu kipi unapendekeza

Mzee siamini katika kujifunza Framework yoyote via Kitabu,cause Framework moja inaweza changes with version
Soma Documentation ya Vuejs ipo simple sana kuielewa kama una Basic Knowledge ya Javascript

Cha muhimu kuelewa ni Architecture ya hizi Framework mbili maarufu kwa sasa yaani Vuejs na Reactjs

Kuna aina tatu za User Interface Design Patterns(Design Patterns ni guide zinazotuongeza in developing UIs)
Tuna

1. Model- View -Controller
   Hapa Web app yetu inakua na Layers tatu tofauti zinazofanya kazi kwa pamoja kuipa uhai Web app yetu
   Model layer ni Data layer unaweza kui imagine kama Database ya application yako
   
   Controller layer ndipo Business logic ya Application yetu ilipo hapa ndipo HTTP au API requests & responses,userinput etc
   zinapokua processed
   
   Na View layer ndio layout ya App yetu..Laravel ni mfano mzuri wa hii Design Pattern
   
   2.Tuna Model-View-Presenter
   Tofauti na MVC,Model na View ni almost kitu kilekile ila zinakuwa connected na Presenter
   sipo familiar sana na hii Design pattern cause sikuwahi i practice
   
   3.Model- View- View Model(MVVM)
   Hii ndio design pattern iliyo nyuma ya Architecture nzima ya Vuejs
   Ni kwamba instead ya kuwa na Layer tatu tofauti ndani ya App yetu,why hivyo vyote visiwe kwenye same place
   
   Na hapa ndipo concept ya Component ilipo zaliwa
   Instead ya kuwa na Web pages zinazotegemea data na Application logic kutoka sehemu nyingine ya App yako
   Kila vue component ina vitu vyote vitatu kwa pamoja
   
   yaani Layout , Business Logic , na Data layer ....
   So in theory kila Component ni stand alone component
   So Vuejs app is made of small stand alone components all the way down.....ambazo ni reusable...

 

[Patiee]

Sija kusoma, ila nafikiri unatumia php sio?

Kama ndio, hakikisha file zote zipo kwenye directory/folder moja hata kama kutakuwa na sub folders, baada ya hapo kuna vitu vitatu unatakiwa uvizingatie,

Moja: uwe na file ambalo litakuwa ndio view yenyewe, mfano index.php
Mbili: uwe na file la javascript ambamo itaandika script kwa kutumia jQuery/Ajax.
Tatu: uwe na file ambalo hilo ndo linafetch Data kutoka kwenye database ndani ya server yako, sasa file hili ndo unatakiwa ili locate pale kwenye url ndani ya Ajax(rejea hapo juu). NB file hili lazima liwe na extension ya PHP.

Na ndani ya file hili lazima ukifetch daraja kama ni za home page basi tambua data hizi tunazitumia kwa kutumia JSON Format, na huko ndani hakikisha unaspecify content type hapa ndo hiyo CORS inapotoweka.

Kazi inayobaki ni kuaccess data na kuzitumia kwenye view(rejea hatua ya kwanza).

Hivyo utakapo load page haita load tena bali itakuwa inafetch data tu in seconds.


Sijui nimekuelewa? Na wewe umenielewa?


Other wise Kama utatumia load() Hapo utakuwa unaload page na kureplace cha ntent kitu ambacho sijui kama ndo hitaji lako.

Nashukuru nimefanikiwa.

 

[Patiee]

Mzee siamini katika kujifunza Framework yoyote via Kitabu,cause Framework moja inaweza changes with version
Soma Documentation ya Vuejs ipo simple sana kuielewa kama una Basic Knowledge ya Javascript

Cha muhimu kuelewa ni Architecture ya hizi Framework mbili maarufu kwa sasa yaani Vuejs na Reactjs

Kuna aina tatu za User Interface Design Patterns(Design Patterns ni guide zinazotuongeza in developing UIs)
Tuna

1. Model- View -Controller
   Hapa Web app yetu inakua na Layers tatu tofauti zinazofanya kazi kwa pamoja kuipa uhai Web app yetu
   Model layer ni Data layer unaweza kui imagine kama Database ya application yako
   
   Controller layer ndipo Business logic ya Application yetu ilipo hapa ndipo HTTP au API requests & responses,userinput etc
   zinapokua processed
   
   Na View layer ndio layout ya App yetu..Laravel ni mfano mzuri wa hii Design Pattern
   
   2.Tuna Model-View-Presenter
   Tofauti na MVC,Model na View ni almost kitu kilekile ila zinakuwa connected na Presenter
   sipo familiar sana na hii Design pattern cause sikuwahi i practice
   
   3.Model- View- View Model(MVVM)
   Hii ndio design pattern iliyo nyuma ya Architecture nzima ya Vuejs
   Ni kwamba instead ya kuwa na Layer tatu tofauti ndani ya App yetu,why hivyo vyote visiwe kwenye same place
   
   Na hapa ndipo concept ya Component ilipo zaliwa
   Instead ya kuwa na Web pages zinazotegemea data na Application logic kutoka sehemu nyingine ya App yako
   Kila vue component ina vitu vyote vitatu kwa pamoja
   
   yaani Layout , Business Logic , na Data layer ....
   So in theory kila Component ni stand alone component
   So Vuejs app is made of small stand alone components all the way down.....ambazo ni reusable...

Asante kwa muongozo.

 

[mathsjery]

Nashukuru nimefanikiwa.

ZIADA:
kama utataka kuload content only ndani ya drive na sio database basi tumia load() ya JQUERY hii haizingatii CORS.

NB: kama unataka kujifunza javascript framework yoyote, kwa sasa nakusihi acha haraka kwa huo mchezo, kisha soma yafuatayo:

Soma javascript vizuri intro mpaka DOM, kisha Soma JQUERY UPYA, usitumie documentation tafuta kitabu soma Jquery v3.3.1 au ya juu ya hapo, ukiweza nenda kacheze nazo utakavyo kwenye real project, Ukianza hivi utagundua unahitaji Bootstrap anzia vversion ya nne v4.0 zingine hazibadiriki sana hii ndo sababu nakuambia utumie vitabu.


At the end of the day utajikuta unahitaji advanced feature, now days angular is better but why not choose it at first, just try REACT OR VUE but napenda zaidi react hivyo kichwa chako kitaamua ukishajua hayo.


Also,
Hakikisha kwa kila lugha uwe na kaproject uliko kafanya kisha tunza kule github ili siku ukikosa pc unaweza mpa mtu link aone uwezo wako, si lazima project iwe imekamilika ndo uiweke kule, usipofata ushauri huu naamini utaleta uzi ukiwa umekata tamaa.

 

[Madikizela]

ZIADA:
kama utataka kuload content only ndani ya drive na sio database basi tumia load() ya JQUERY hii haizingatii CORS.

NB: kama unataka kujifunza javascript framework yoyote, kwa sasa nakusihi acha haraka kwa huo mchezo, kisha soma yafuatayo:

Soma javascript vizuri intro mpaka DOM, kisha Soma JQUERY UPYA, usitumie documentation tafuta kitabu soma Jquery v3.3.1 au ya juu ya hapo, ukiweza nenda kacheze nazo utakavyo kwenye real project, Ukianza hivi utagundua unahitaji Bootstrap anzia vversion ya nne v4.0 zingine hazibadiriki sana hii ndo sababu nakuambia utumie vitabu.


At the end of the day utajikuta unahitaji advanced feature, now days angular is better but why not choose it at first, just try REACT OR VUE but napenda zaidi react hivyo kichwa chako kitaamua ukishajua hayo.


Also,
Hakikisha kwa kila lugha uwe na kaproject uliko kafanya kisha tunza kule github ili siku ukikosa pc unaweza mpa mtu link aone uwezo wako, si lazima project iwe imekamilika ndo uiweke kule, usipofata ushauri huu naamini utaleta uzi ukiwa umekata tamaa.

Thanks a lot

 

[Kuchwizzy]

Coming back soon!