Bootstrap 4 crash course (Mpaka mwisho)

1. Front end
2. Backend
3. Database

Kuchwizzy said:

Bootstrap 5 is out

Click to expand...

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

Patiee said:

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

Code:

DOCTYPE html>









welcome page



[LIST]

[*]home

[*]About

[/LIST]


Hello page



Content is loaded here

Msaada tafadhali
mathsjery Detective J

Click to expand...

Patiee said:

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

Code:

DOCTYPE html>









welcome page



[LIST]

[*]home

[*]About

[/LIST]


Hello page



Content is loaded here

Msaada tafadhali
mathsjery Detective J

Click to expand...

mathsjery said:

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:

Code:

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

Click to expand...

Kuchwizzy said:

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

Click to expand...

intelinside said:

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

Click to expand...

Patiee said:

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.

Click to expand...

Kuchwizzy said:

Mzee try Vuejs..ni simple mno

Click to expand...

Patiee said:

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.

Click to expand...

Patiee said:

Kitabu kipi unapendekeza

Click to expand...

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

mathsjery said:

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.

Click to expand...

Kuchwizzy said:

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

Click to expand...

Patiee said:

Nashukuru nimefanikiwa.

Click to expand...

mathsjery said:

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.

Click to expand...