ምዕራፍ 5 ገጽታውን መሙላት

በምዕራፍ 4 ውስጥ የሩቢ አጪር ጉብኝት ማጠቃለያ ሂደት ላይ፣ የአፕልኬሽኑን ቅጠሉህ በማሳያ አኘልኬሽኑ ላይ እንዴት ማካተት እንደምንችል ተምረናል (ክፍል 4.1)፤ ነገር ግን (በክፍል 4.3.4 ውስጥ እንደተገለጸው) ይህ ቅጠሉህ ምንም ዓይነት ወ.ሉ.ቅን አላካተተም፡፡ በዚህ ምዕራፍ ውስጥ፣ በአኘልኬሽናችን ውስጥ አንድ የወ.ሉ.ቅ መዋቅርን በማካተት ብጁ ቅጠሉሆችን በመሙላት እንጀምራለን፤ ከዚያም የራሳችንን አንዳንድ ብጁ ቅጦችን እናክላለን፡፡¹ እንዲሁም እስካሁን ድረስ የፈጠርናቸውን ገጾች ማለት የመነሻ እና የስለኛ ገጾችን ከገጽታው ጋር ማገናኘት እንጀምራለን (ክፍል 5.1)፡፡ በሂደቱ ላይ አንድ የአገባበ ቆንጆ የሉህ ቅጥ (አ.ቆ.ሉ.ቅ) ማስተዋወቂያን ጨምሮ፤ ስለ ከፊሎች፣ ስለ የሬይልስ ማዘዋወርያወች፣ እና ስለ የንብረት ቧንቧመስመር እንማራለን (ክፍል 5.2)። ተጠቃሚዎች በጣቢያችን ላይ እንዲመዘገቡ ለማድረግ፣ የመጀመሪያውን አስፈላጊ እርምጃ በማከል ይህንን ክፍል እናጠናቅቃለን (ክፍል 5.4)።

በዚህ ምዕራፍ ውስጥ አብዛኛዎቹ ለውጦች፣ በማሳያ አፕልኬሽኑ የጣቢያ ገጽታ መንቀሻን ማረምን እና ማከልን ያሳትፋሉ፣ ይህ (በሳጥን 3.3 ባሉት መመሪያዎች ላይ በመመርኮዝ) በመደበኛነት ፈተና-መሬ ብልጸጋን የማንጠቀምበት እንዳውም በጪራሽ የማንፈትነው የስራ ዓይነት ነው፡፡ በዚህ ምክንያት የአግኙን ገጽን ለማከል ብቻ ፈ.መ.ብን ከመጠቀም ባሻገር፣ አብዛኛውን ጊዜያችንን በጽሑፍ አርታኢ እና በድር አሳሽ ላይ እናጠፋለን (ክፍል 5.3.1)። በመጨረሻው ገጽታ ላይ ያሉት አገናኞች ትክክለኛ መሆናቸውን ለማረጋገጥ የመጀመሪያውን የውህደት ፈተናችንን ስንጽፍ ግን አንድ አዲስ አስፈላጊ ፈተና እናክላለን (ክፍል 5.3.4)፡፡

5.1 አንዳንድ መዋቅሮችን መጨመር

የሩቢኦንሬይልስ ስልጠና መጽሐፍ አንድ ለድር ማበልጸጊያ የሚሆን መጽሐፍ እንጂ ድር ለመንደፊያ የሚሆን መጽሐፍ አይደለም፣ ይሁን እንጂ አንድ አይን በማይስብ አፕልኬሽን ላይ መስራቱ በጣም ደባሪ ነው፣ ስለዚህ በዚህ ክፍል ውስጥ አንዳንድ መዋቅሮችን ወደ ገጽታችን እናክል እና በወ.ሉ.ቅ በትንሹ ቅጥ እናላብሰዋለን። አንዳንድ ብጁ የወ.ሉ.ቅ ህጐችን ከመጠቀም ባሻገር፣ የትዊተር የድር መንደፊያ መዋቅር ክፍት-ምንጪን ማለት ቡትስትራፕንም እንጠቀማለን፡፡² (ይህ ንድፍ መጀመሪያ ለዴስክቶፕ እና ለላፕቶፕ ኮምፒተሮች እንዲስማማ ተብሎ የተዘጋጀ ነው፣ ነገር ግን ለተንቀሳቃሶች የሚሆኑ የተወሰኑ ተጨማሪ የወ.ሉ.ቅ ደንቦችን በክፍል 8.2.3 ውስጥ እናካትታለን።) እንዲሁም ትንሽ ገጽታው መጨናነቅ ሲጀምር ከፊል ፋይሎችን በመጠቀም ኮዳችንን ቅጥ እናስይዘዋለን፡፡

የድር አፕልኬሽኖችን በሚገነቡበት ጊዜ፣ የተጠቃሚ በይነገጹን አጠቃላይ እይታ በተቻለ መጠን በጊዜው ማወቁ ጠቃሚ ነው፡፡ ስለሆነም በተቀረው በዚህ መጽሐፍ ውስጥ ብዙውን ጊዜ ስእላዊ መግለጫዎችን (Mockups) ምርኩዝ እናደርጋለን (ስእላዊ መግለጫዎች፣ በአንድ ድር አውድ ውስጥ ዋየርፍሬሞች (Wireframes) ይባላሉ)። ስእላዊ መግለጫወች አፕልኬሽኑ መጨረሻ ላይ ተሰርቶ ሲያልቅ ምን እንደሚመስል የሚያሳዩ አነስተኛ ቅዶች ናቸው።³ በዚህ ምዕራፍ ውስጥ በቅድሚያ የጣቢያውን አርማ፣ ግርጌ እና የራስጌ መዳሰሻ ጨምሮ በክፍል 3.2 ላይ የተዋወቁት ቋሚ ገጾችን እናበለጽጋለን። ለእነዚህ ገጾች እጅግ አስፈላጊ የሆነው የመነሻ ገጽ ስእላዊ መግለጫ በምስል 5.1 ላይ ይታያል፡፡ የመጨረሻውን ውጤት በምስል 5.9 ላይ ማየት ትችላላችሁ፡፡ በሁለቱ መካከል አንዳንድ የተወሰኑ ልዩነቶች እንዳሉ አስተውላችሁ ይሆናል፣ ለምሳሌ በገጹ ላይ የሬይልስን አርማ በማከል ገጹን እንጨርሳለን፣ ነገር ግን ስእላዊ መግለጫው ይህን አያሳይም፤ ባያሳይም ስእላዊ መግለጫ ትክክለኛ መሆን ስለማይጠበቅበት ይህ ምንም ችግር አያመጣም፡፡

images/figures/home_page_mockup_3rd_edition

የማሳያ አኘልኬሽኑ የመነሻ ገጽ ስእላዊ መግለጫ።

እንደተለመደው ጊትን ለስሪት መቆጣጠሪያ እየተጠቀማችሁ ከሆነ፣ አሁን አንድ አዲስ ቅርንጫፍ ለመፍጠር ጥሩ ጊዜ ነው፡-

$ git checkout -b ገጽታውን-መሙላት

5.1.1 የጣቢያው መዳሰሻ

ለማሳያ አፕልኬሽኑ አገናኞችን እና ቅጦችን ለማከል አንድ እርምጃ ወደፊት እንጓዝ ዘንድ፣ (ለመጨረሻ ጊዜ በዝርዝር 4.3 ውስጥ የታየውን) የጣቢያውን የገጽታ ፋይልን ማለት የ‘አፕልኬሽን.ሃጽመቋ.ክሩ (application.html.erb) ፋይልን በተጨማሪ የሃ.ጽ.መ.ቋ መዋቅር እናዘምነዋለን። ይህ ደግሞ አንዳንድ የወ.ሉ.ቅ ክፍሎችን እና አንዳንድ ተጨማሪ ክፍፍሎችን ማከልን እና የጣቢያችንን ዳሳሽ መጀመርን ያካትታል፡፡ ሙሉው ፋይል በዝርዝር 5.1 ውስጥ ይገኛል፤ የተለያዩ ቁርጥራጪ ክፍሎችንም በማከታተል ያብራራል፡፡ ትግስት ካጣችሁ ግን ምስል 5.2 ላይ ውጤቱን ማየት ትችላላችሁ (አስተውሉ:- እዛ ላይ የምታዩት ውጤቱ አርኪ ለመሆን ብዙ ይቀረዋል)።

ዝርዝር 5.1: 

የጣቢያው ገጽታ ከታከለ መዋቅር ጋር።  app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title><%= mulu_arest(yield(:title)) %></title>
    <meta charset="utf-8">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all',
                                           'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
      </script>
    <![endif]-->
  </head>
  <body>
    <header class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <%= link_to "ማሳያ አፕልኬሽን", '#', id: "አርማ" %>
        <nav>
          <ul class="nav navbar-nav navbar-right">
            <li><%= link_to "መነሻ",  '#' %></li>
            <li><%= link_to "እርዳታ",  '#' %></li>
            <li><%= link_to "ይግቡ",   '#' %></li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

እስኪ በዝርዝር 5.1 ላይ ያሉትን አዲሶቹን አባላት ከላይ እስከ ታች እንመልከት፡፡ በክፍል 3.4.1 ላይ በአጪሩ እንደተጠቀሰው፣ (ከላይ በሰንድ አይነቱ እንደተመለከተው:- <!DOCTYPE html>) ሬይልስ በነባሪነት ሃ.ጽ.መ.ቋ5‘ን ይጠቀማል፡፡ ይህንን ሃ.ጽ.መ.ቋ5 በዚህ ጊዜ አብዛኛወቹ አሳሾች የሚደግፉት ሲሆን፣ እኛ ግን “የሃ.ጽ.መ.ቋ5 መደገፊያ (Shim) (ወይም ሰንጢ (Shiv))” በመባል የሚታወቀውን የጃቫስክሪፕት ኮድን በማከል ጣቢያችንን ለአረጋውያን አሳሾች ይበልጥ ተደራሽ እንዲሆን ማድረግ እንችላለን:-⁴

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
  </script>
<![endif]-->

በተወሰነ መልኩ ግራ የሚያጋባው የአጻጻፍ አገባብ:-

<!--[if lt IE 9]>

"የማይክሮሶፍት ኢንተርኔት ኤክስፕሎረሉ (IE) ከ 9 ካነሰ (if lt IE 9) ብቻ" የሚል መዝጊያን ያካትታል፡፡ ይህ ያልተለመደ አገባብ የሬይልስ አካል አይደለም፤ እንዳውም ለእንደዚህ አይነቱ ሁኔታ በኢንተርኔት ኤክስፕሎረር አሳሾች የተደገፈ አንድ የሁኔታዊ አስተያየት ነው፡፡ ይህ ደግሞ በጣም ጥሩ ነገር ነው፣ ምክንያቱም እንደ ፋየር ፎክስ፣ ክሮም እና ሳፋሪ ያሉ ሌሎች አሳሾች ላይ አንዳችም ችግር ሳያስከትል ከዘጠነኛው ስሪት በታች ለሆኑ የኢንተርኔት ኤክስፕሎረር ብቻ የሃ.ጽ.መ.ቋ 5 መደገፊያን እንድናካትት ስለሚያስችለን ነው።

የሚቀጥለው ክፍል፣ ለጣቢያው ጽሑፋዊ አርማ አንድ ራስጌ (header)፣ አንድ ጥንድ የሃ.ጽ.መ.ቋ አባል ክፍፍሎችን (ማለት ክፍሊት‘ን (div) በመጠቀም) እና የማሰሻ አገናኞችን ከዝርዝር አባላቶች ጋር ያካትታል:-

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "ማሳያ አፕልኬሽን", '#', id: "አርማ" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "መነሻ",  '#' %></li>
        <li><%= link_to "እርዳታ",  '#' %></li>
        <li><%= link_to "ይግቡ",   '#' %></li>
      </ul>
    </nav>
  </div>
</header>

እዚህ ጋር የ‘ራስጌ (header) መለያው የሚያመለክተው፣ በገጹ አናት ላይ መቀመጥ የሚገባቸውን አባላቶች ነው፡፡ የ‘ራስጌ (header) መለያውን በየመሃሉ ክፍትቦታወችን በመተው ሶስት የወ.ሉ.ቅ ክፍሎችን (CSS Classes)⁵ ሰጥተነዋል፣ ክፍሎቹም መዳረሻአሞሌ (navbar)፣ ከላይ-ቋሚ-የመዳረሻአሞሌ (navbar-fixed-top) እና ተገላቢጦሽ-መዳረሻአሞሌ (navbar-inverse) ይባላሉ:-

<header class="navbar navbar-fixed-top navbar-inverse">

ሁሉም የሃ.ጽ.መ.ቋ አባላቶች በክፍሎች እና በመታወቂያዎች (ids)⁶ መሰየም ይችላሉ፤ ክፍሎቹ እና መታወቂያዎቹ መሰየሚያወች ብቻ ናቸው፣ እናም በወ.ሉ.ቅ ቅጥ ለማድረግ ጠቃሚ ናቸው (ክፍል 5.1.2)። በክፍሎች እና በመታወቂያዎች መካከል ያለው ዋነኛው ልዩነት፣ ክፍሎችን በአንድ ገጽ ላይ ብዙ ጊዜ መጠቀም ሲቻል፣ መታወቂያዎችን ግን አንድ ጊዜ ብቻ መጠቀም መቻሉ ነው፡፡ በአሁኑ ሁኔታ ላይ፣ ሁሉም የመዳሰሻ አሞሌ ክፍሎች በክፍል 5.1.2 ውስጥ ለምንጪነው እና ለምንጠቀምበት ለቡትስትራፕ መዋቅር ልዩ ትርጉም አላቸው።

በ‘ራስጌ (header) መለያው ላይ አንድ የ‘ክፍሊት (div) መለያ እናያለን:-

<div class="container">

የ‘ክፍሊት (div) መለያው አንድ መሰረታዊ ክፍፍል ነው፣ አንድ ሰነድን እተለያዩ ክፍሎች ላይ ከመከፋፈል ውጪ ምንም ነገር አያደርግም። በቀድሞ ዘይቤ ሃ.ጽ.መ.ቋ ውስጥ የ‘ክፍሊት (div) መለያወች ሁሉንም ጣቢያ ለመከፋፈል ያገለግሉ ነበረ፣ አሁን ግን ሃ.ጽ.መ.ቋ5 ለብዙ አፕልኬሽኖች የተለመዱ ስርዓተ ክፍፍሎችን ማለት ራስጌ (header)፣ መዳሰሻ (nav) እና ክፋይ (section) የተባሉ ተጨማሪ አባላትን ያክላል። በዚህ ሁኔታ ላይ ክፍሊቱ (div) አንድ መያዣ (container) የተባለ የወ.ሉ.ቅ ክፍል አለው ማለት ነው፡፡ ራስጌ (header) መለያ ውስጥ ያሉ ክፍሎች በቡትስትፕ አሰራር ውስጥ ልዩ ትርጉም እንዳላቸው ሁሉ፣ በ‘ክፍሊቱ (div) መለያ ውስጥ ያሉ ክፍሎችም በቡትስትፕ አሰራር ውስጥ ልዩ ትርጉም አላቸው።

ከክፍሊት መለያው በኋላ አንዳንድ ክት ሩቢዎች ያጋጥሙናል:-

<%= link_to "ማሳያ አፕልኬሽን", '#', id: "አርማ" %>
<nav>
  <ul class="nav navbar-nav navbar-right">
    <li><%= link_to "መነሻ",   '#' %></li>
    <li><%= link_to "እርዳታ",  '#' %></li>
    <li><%= link_to "ይግቡ",   '#' %></li>
  </ul>
</nav>

እነዚህ አገናኞችን ለመፍጠር የሬይልስ የ‘ዓገናኝ (link_to) ረጅ ዘዴን ይጠቀማሉ። የ‘ዓገናኝ (link_to) የመጀመሪያ ነጋሪአሴት የሚያገናኘው ጽሑፉን ሲሆን፣ የሁለተኛው ነጋሪአሴት ደግሞ ዓ.አ.ሃ.አውን ነው፤ (ይህ እኛ በክፍል 3.2.2 ውስጥ የ‘ኤ (a) መልህቅ መለያን በመጠቀም በቀጥታ የፈጠርነው ነው)፡፡ በክፍል 5.3.3 ውስጥ ዓ.አ.ሃ.አውን በስዩም ማዘዋወርያወች (Named Routes) እንሞላዋለን፣ ለአሁን ግን በድር ንድፍ ውስጥ በተለምዶ ጥቅም ላይ የዋለውን፣ እና ቁራጪ (Stub) ዓ.አ.ሃ.አ ተብሎ የሚጠራውን ምልክት '#' እንጠቀማለን ('#' ማለት፣ ለእውነተኛው ዓ.አ.ሃ.አ አንድ “ቁራጪ Stub” ወይም ቦታያዥ ብቻ ነው ማለት ነው)። ሶስተኛው ነጋሪአሴት ምርጫዊ ተርታ ሲሆን፣ በዚህ ሁኔታ ላይ፣ የ‘ አርማ የወ.ሉ.ቅ መለያን ወደ ማሳያ አፕልኬሽኑ ማገናኛ ላይ ያክላል። (ሌሎቹ ሶስቱ አገናኞች ምንም ምርጫዊ ተርታ የላቸውም፣ የተርታ መኖር አለመኖር ምርጫዊ ስለሆነ ባይኖራቸውም ምንም አይደለም፡፡) የሬይልስ ረጅወች ብዙውን ጊዜ ምርጫዊ ተርታወችን ይወስዳሉ፣ ይህም ሬይልስን ፍጹም ሳንለቅ ልባችን የፈቀደውን የሃ.ጽ.መ.ቋ አማራጮችን ለማከል የሚያስችል ችሎታን ይሰጡናል።

ሁለተኛው ክፍሊት ውስጥ ያለው አባል የያዘው የማሰሻ አገናኞች የተሰራው፣ የ‘ቁጥር-አልባ ዝርዝር (Unordered list) (ul) መለያን ከ‘ዓይነት ዘርዝር (List Item) li መለያ ጋር አብሮ በመጠቀም ነው፡፡

<nav>
  <ul class="nav navbar-nav navbar-right">
    <li><%= link_to "መነሻ",   '#' %></li>
    <li><%= link_to "እርዳታ",   '#' %></li>
    <li><%= link_to "ይግቡ", '#' %></li>
  </ul>
</nav>

ምንም እንኳን የ‘መዳሰሻ (<nav>) መለያ እዚህ ላይ በመደበኛነት አላስፈላጊ ቢሆንም፣ የመዳሰሻ አገናኞች ዓላማን በይበልጥ በግልጽ ለማስተላለፍ ሲባል ግን ጥቅም ላይ ይውላል። ይህ በእንዲህ እንዳለ የ‘መዳሰሻ (nav)፣ የ‘መዳረሻአሞሌ-መዳረሻ (navbar-nav) እና የ‘መዳረሻአሞሌ-ቀኝ (navbar-right) ክፍሎች በቁጥር-አልባ ዝርዝር (ul) መለያ ላይ ለቡትስትፕ ልዩ ትርጉም ስላላቸው በክፍል 5.1.2 ውስጥ የቡትስትራፕ ወ.ሉ.ቅን በምናካትትበት ጊዜ በራስሰር ጥሩ ገጽታን ይይዛሉ፡፡ መዳሰሻውን በአሳሻችሁ ⁷ በመመርመር እንደምታረጋገጡት፣ ሬይልስ አንዴ ገጽታውን ካካሄደ እና ክት ሩቢውን ከገመገመ በኋላ፣ ዝርዝሩ ይህንን ይመስላል:-⁸

<nav>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">መነሻ</a></li>
    <li><a href="#">እርዳታ</a></li>
    <li><a href="#">ይግቡ</a></li>
  </ul>
</nav>

ይህ ወደ አሳሹ የሚመለስው ጽሑፍ ነው።

የገጽታው የመጨረሻው ክፍል ለዋና ይዞታው የሚሆነው አንድ ክፍሊት (div) ነው:-

<div class="container">
  <%= yield %>
</div>

እንደ በፊቱ የ‘መያዣ (container) ክፍልም ለቡትስትፕ ልዩ ትርጉም አለው፣ በክፍል 3.4.3 ላይ እንደተማርነው፣ የ‘አፍራ (yield) ዘዴው የእያንዳንዱን ገጽ ይዘቶች በጣቢያው ገጽታ ውስጥ ያስገባል፡፡

በክፍል 5.1.3 ላይ ከምናክለው የጣቢያው ግርጌ በስተቀር፣ ገጽታችን አሁን ተሟልቷል፣ እናም ውጤቱንም የመነሻ ገጹን በመጎብኘት ማየት እንችላለን፡፡ በኋላ ላይ የሚመጣውን ቅጥ ለመጠቀም ያገለግለን ዘንድ፣ በ‘መነሻ.ሃጽመቋ.ክሩ (menesha.html.erb) ትይታ ላይ የተወሰኑ ተጨማሪ አባላቶችን ከወዲሁ እናክላለን (ዝርዝር 5.2)፡፡

ዝርዝር 5.2: 

የመነሻ ገጹ ከአንድ የመመዝገቢያ ገጽ አገናኝ ጋር።  app/views/quami_getss/menesha.html.erb
<div class="center jumbotron">
  <h1>እንኳን ወደ ማሳያ አፕልኬሽን በደህና መጡ!</h1>

  <h2>
    ይህ <a href="https://www.railstutorial.org/">
    የሩቢ ኦን ሬይልስ ስልጠና ትምህርት</a>
    ማሳያ ለተባለው አፕልኬሽን፡ የመነሻ ገጽ ነው፡፡
  </h2>

  <%= link_to "ይመዝገቡ!", '#', class: "btn btn-lg btn-primary" %>
</div>

<%= link_to image_tag("rails.svg", alt: "የሬይልስ አርማ", width: "200"),
                      "https://rubyonrails.org/" %>

በምዕራፍ 7 ውስጥ ተጠቃሚወችን ወደ ጣቢያችን ለማከል ከወዲሁ ለመዘጋጀት ያህል፣ የመጀመሪያው ዓገናኝ (link_to) ይህን የመሰለ ቅጽ ያለው አንድ ቁራጪ (ቦታ-ያዥ) አገናኝን ይፈጥራል:-

<a href="#" class="btn btn-lg btn-primary">ይመዝገቡ!</a>

በ‘ክፍሊቱ (div) መለያ ውስጥ የ‘ጃምቦትሮን (jumbotron) ክፍል በቡትስትፕ ውስጥ አንድ ልዩ ትርጉም እንዳለው ሁሉ፣ በይመዝገቡ አዝራር ውስጥ ያሉት የ‘አዝራር (btn)፣ የ‘ትልቅ-አዝራር (btn-lg) እና የ‘መሰረታዊ-አዝራር (btn-primary) ክፍሎችም በቡትስትፕ ውስጥ እንዲሁ ልዩ ትርጉም አላቸው።

ሁለተኛው ዓገናኝ (link_to) የ‘ምስል-መለያ (image_tag) ረጅ ችሎታን ያሳያል፤ ይህም ወደ ምስሉ የሚያመላክት መንገድን እና አንድ አማራጫዊ የአማራጮች ተርታን እንደ ነጋሪአሴት አድርጎ ይወስዳል፣ በዚህ ሁኔታ ላይ ወካዮችን በመጠቀም የምስል መለያውን የ‘አማራጪ (alt) እና የ‘ስፋት (width) ባሕሪወችን ያዘጋጃል፡፡ ይህ እንዲሰራ አንድ ሬይልስ.ኤስቪጅ (rails.svg) የተባለ ምስል በ‘አፕ/ንብረቶች/ምስሎች/ (app/assets/images/) ማውጫ ውስጥ መኖር አለበት፤ ይህንን ምስልም ከበበቂ ተማር ድረጣቢያ ላይ ማውረድ https://cdn.learnenough.com/rails.svg እና በ‘አፕ/ንብረቶች/ምስሎች/ (app/assets/images/) ማውጫ ውስጥ ማስቀመጥ ይኖርባችኋል።

የደመና ቅ.ማ.አን ወይም ሌላ ዩኒክስ ነክ ስርዓትን የምትጠቀሙ ከሆነ፣ በዝርዝር 5.3⁹ ላይ እንደሚታየው የ‘ከርል (curl) መገልገያን በመጠቀም ምስሉን ከበይነመረብ ማውረድ ትችላላችሁ፡፡

ዝርዝር 5.3: 

አንድ ምስልን ማውረድ።
$ curl -o app/assets/images/rails.svg -OL https://cdn.learnenough.com/rails.svg

በዝርዝር 5.2 ውስጥ የ‘ምስል-መለያ (image_tag) ረጅን ስለተጠቀምን፣ ሬይልስ የንብረት ቧንቧመስመርን በመጠቀም በ‘አፕ/ንብረቶች/ምስሎች/ (app/assets/images/) ማውጫ ውስጥ ያለን ማንኛውንም ምስል በራስሰር ይፈልጋል (ክፍል 5.2)፡፡

አሁን የድካማችንን ፍሬ ለማየት ዝግጁ ነን፡፡ ለውጦቹን ለመመልከት የሬይልስ አገልጋዩን እንደገና ማስጀመር ሊኖርባችሁ ይችላል (ሳጥን 1.2)፣ እና ውጤቱም በምስል 5.2 ላይ እንደሚታየው መሆን ይጠበቅበታል፡፡

የመነሻ ገጹ ያለ ብጁ ወ.ሉ.ቅ።

የ‘ምስል_መለያ (image_tag) ውጤቶችን የበለጠ ግልጽ ለማድረግ፣ በአሳሻችን ውስጥ ምስሉን በመመርመር የሚሰራውን ሃ.ጽ.መ.ቋ እንመልከት:-¹⁰

<img alt="የሬይልስ አርማ" width="200px" src="/assets/rails-<ረጅሙ ሃረግ>.svg">

እዚህ ውስጥ ያለው <ረጅሙ ሃረግ> የፋይሉ ስም ልዩ መሆኑን ለማረጋገጥ በሬይልስ የታከለ አንድ የነሲብ ዋጋ ነው፣ ይህም ምስሎች በሚዘመኑበት ጊዜ የድር አሳሾች ትክክለኞቹን ምስል እንዲጫኑ ያደርጋል (ከአሳሹ መሸጎጫ (Cache) ምስሎቹን ፈልጎ ከማግኘት ይልቅ፣ የዘመኑትን የምስሎች ይዞታ ያቀርባል)፡፡ የ‘ምንጪ (src) ባሕሪው ለሁሉም ንብረቶች (ማለት ለምስሎች፣ ለጃቫስክሪፕት፣ ለወ.ሉ.ቅ፣ ወዘተረፈ) የጋራ የሆነውን የንብረቶች (assets) ማውጫን ከመጠቀም በስተቀር ምስሎች‘ን (images) እንደማያካትት ልብ ልትሉ ይገባል። ሬይልስ በአገልጋዩ ላይ በንብረቶች (assets) ማውጫ ውስጥ ያሉትን ምስሎችን ከትክክለኛው ከ‘አፕ/ንብረቶች/ምስሎች (app/assets/images) ማውጫ ጋር ያዛምዳል፤ በአሳሹ በኩል ግን ሁሉም ንብረቶች በአንድ ማውጫ ውስጥ ማለት ሁለቱ በአንድነት ላይ ያሉ ይመስሉታል፣ የዚህ መሆን ደግሞ ምስሎቹ በፍጥነት እንዲገለገሉ ያስችላቸዋል። ይህ በእንዲህ እንዳለ፣ ገጹ በአንድ ምስሎችን ማሳየት በማይችል ፕሮግራም ከተደረሰ (ለምሳሌ:- ማየት ለተሳናቸው ሰወች መገልገያ የሚሆን የማያ-ገጽ (screen) አንባቢ ውስጥ ከገባ) አንድ የሚታይ ነገር ቢኖር በ‘አማራጪ (alt) ባሕሪ ውስጥ ያለው ነገር ብቻ ነው።

በምስል 5.2 ላይ የታየው ውጤት ይሄን ያህል የማያስደንቅ ሊመስል ይችላል፣ ደስ የሚለው ግን እኛ ለሃ.ጽ.መ.ቋ አባላቶች የሚስማሙ ክፍሎችን በመስጠት ጥሩ ስራ መስራታችን ነው፣ ይህም በወ.ሉ.ቅ ጣቢያው ላይ ቅጥን ለማከል በአንድ ጥሩ ሁኔታ ላይ ያስቀምጠናል።

መልመጃዎች

የሬይልስ ስልጠናን ለገዙ ሰወች በሙሉ የሁሉም የመልመጃ መልሶች እዚህ ላይ ይገኛሉ።

የሌሎች ሰዎች መልሶችን ለማየት እና የራሳችሁን ደግሞ ለመመዝገብ፣ በሬይልስ ስልጠና ወይም ሁሉንም በበቂ ተማር መድረሻ ጥቅል ላይ ተመዝገቡ፡፡

ያለ አንድ የድመት ምስል ትዊተርን የመሰለ የድር ገጽ የተሟላ ነው ማለቱ በጣም ይከብዳል፡፡ ስለዚህ በዝርዝር 5.4 ላይ የሚገኘውን ትእዛዝ፣ በማዘዥያ መስመራችሁ ላይ አስገብታችሁ በመጠቀም፣ ምስል 5.3 ላይ ያለውን የድመት ምስል አውርዱ።¹¹
የ‘አንቀሳቅስ (mv) ትእዛዝን በመጠቀም፣ የ‘ድመት (kitten.jpg) ፋይልን ወደ ትክክለኛው የምስሎች ንብረት ማውጫ ውስጥ አንቀሳቅሱ (ክፍል 5.2.1)።
ምስል_መለያ‘ን (image_tag) በመጠቀም፣ በምስል 5.4 ላይ እንደሚታየው፣ የ‘ድመቱን (kitten.jpg) ምስል ወደ መነሻ ገጹ አክሉ፡፡

አንድ ግዴታ መኖር ያለበት የድመት ምስል።

ዝርዝር 5.4: 

የአንድ ድመት ስእልን ከበይነመረብ ማውረድ።
$ curl -OL https://cdn.learnenough.com/kitten.jpg

የአንድ ድመት ምስልን በመነሻ ገጹ ላይ የማከል ውጤት፡፡

5.1.2 ቡትስትራፕ እና ብጁ የወ.ሉ.ቅ

በክፍል 5.1.1 ውስጥ ብዙ የሃ.ጽ.መ.ቋ አባላትን ከወ.ሉ.ቅ ክፍሎች ጋር አዛመድን፣ ይህም በአንድ ወ.ሉ.ቅ ላይ የተመሰረተ ገጽታን ለመገንባት ይሄ ነው የማይባል፣ እንደ ልባችን የሚገራ እድልን ይሰጠናል፡፡ በክፍል 5.1.1 ላይ እንደተጠቀሰው፣ አብዛኛወቹ እነዚህ ክፍሎች ለቡትስትፕ የተወሰኑ ናቸው፣ ቡትስትፕ አንድ ጥሩ የድር ንድፍን እና በአንድ ሃ.ጽ.መ.ቋ5 አፕልኬሽን ላይ የተጠቃሚ በይነገጽ አባሎችን ለማከል ቀላል የሚያደርግ የወ.ሉ.ቅ መዋቅር ነው። በዚህ ክፍል ውስጥ የአፕልኬሽኑን አንዳንድ ቅጦችን ማከል ለመጀመር፣ ቡትስትራፕን ከአንዳንድ ብጁ የወ.ሉ.ቅ ደንቦች ጋር እናጣምራለን፡፡ ቡትስትራፕን መጠቀሙ የአፕልኬሽናችንን ንድፍ በራስሰር ምላሽሰጥ (Responsive) እንዲሆን፣ እንደሚያደርገው መንገዘቡ አስፈላጊ ነው፣ ይህም በተለያዩ መሳሪያወች ላይ ጥሩ ሆኖ መታየቱን ያረጋግጣል፡፡

የመጀመሪያ እርምጃችን ቡትስትራፕን ማከል ነው፣ ይህ ደግሞ በሬይልስ አኘልኬሽን ውስጥ የሚከናወነው በዝርዝር 5.5¹² ላይ እንደሚታየው በቡትስትራፕ-ሳስ (bootstrap-sass) እንቁ ነው። የቡትስትራፕ መዋቅር ተለዋዋጪ ቅጠሉሆችን ለመስራት በተፈጥሮው የከሲታ ወ.ሉ.ቅ (Less CSS)ቋንቋን ይጠቀማል፣ ነገር ግን የሬይልስ የንብረት ቧንቧመስመር በጣም ተመሳሳይ የሆነውን ማለት አገባበ ቆንጆ የሉህ ቅጥ (አ.ቆ.ሉ.ቅ (Sass)) ቋንቋን በነባሪነት ይደግፋል (ክፍል 5.2)፤ ስለሆነም ቡትስትራፕ-ሳስ (bootstrap-sass) ከሲታ ወ.ሉ.ቅን ወደ አ.ቆ.ሉ.ቅ ይቀርይር እና የሚፈለጉትን የቡትስትራፕ ፋይሎች ለአሁኑ አኘልኬሽን ይሰራል፡፡

ዝርዝር 5.5: 

የቡትስትራፕ-ሳስ (bootstrap-sass) እንቁን በ‘እንቁ_ፋይል (Gemfile) ውስጥ ማከል።
source 'https://rubygems.org'

gem 'rails',          '6.1.4.1'
gem 'bootstrap-sass', '3.4.1'
gem 'puma',           '5.3.1'@import "bootstrap-sprockets";
@import "bootstrap";
    get root_path
    get root_path
.
.
.

ቡትስትራፕን ለመጫን እንደተለመደው፣ የ‘ጠቅል ጫን (bundle install) ትእዛዝን እናስኬዳለን:-

$ bundle _2.2.17_ install

ምንም እንኳ የ‘ሬይልስ አመንጪ (rails generate) ትእዛዝ ለእያንዳንዱ መቆጣጠሪያ አንድ የተለየ የወ.ሉ.ቅ ፋይልን በራስሰር ቢፈጥርም፣ ሁሉንም በትክክለኛው ቅደም ተከተል በትክክል ለማስቀመጥ ግን ይከብዳል፤ ስለሆነም ስራው እንዲቀልልን ለዚህ ስልጠና የሚያስፈልጉንን ወ.ሉ.ቅ በሙሉ በአንድ ፋይል ውስጥ እናስቀምጣቸዋለን፡፡ ብጁው ወ.ሉ.ቅ እንዲሰራ ለማድረግ አንድ እርምጃ ወደፊት እንጓዝ ዘንድ፣ የመጀመሪያው ሂደት፣ ይህንን ብጁ ወ.ሉ.ቅ ለመያዝ የሚያገለግለውን ፋይል መፍጠር ነው:-

$ touch app/assets/stylesheets/bju.scss

(ይህ አንድ ፋይልን ለመፍጠር የ‘ንካ (touch) ትእዛዝን ይጠቀማል፣ ነገር ግን እናንተ በፈለጋችሁት መንገድ ፋይሉን መፍጠር ትችላላችሁ፣ ለማስታውስ ያህል ይሄን ትእዛዝ በክፍል 3.3.3 ላይ ተጠቅመንበት ነበር።) እዚህ ጋር የፋይል ስሙ እና የፋይል ቅጥያ ስሙ ሁለቱም አስፈላጊዎች ናቸው፡፡ ማውጫው

app/assets/stylesheets/

የንብረት ቧንቧመስመር ክፍል ነው (ክፍል 5.2)፣ እና በዚህ ማውጫ ውስጥ የለ ማናቸውም ቅጠሉህ፣ በጣቢያው ገጽታ ውስጥ በራስሰር የሚካተት የ‘አፕልኬሽን.ወሉቅ (application.css) ፋይል አካል ሆኖ ይካተታል። በተጨማሪም ብጁ.አቆሉቅ (bju.scss) የሚለው የፋይል ቅጥያ ስም .አቆሉቅ‘ን (.scss) ያካተተ ሲሆን፤ አንድ “የአገባበ ቆንጆ የሉህ ቅጥ (አ.ቆ.ሉ.ቅ) Sassy CSS” ፋይል እንደሆነ እና አ.ቆ.ሉ.ቅን በመጠቀም ፋይሉን ለማስኬድ የንብረት ቧንቧመስመርን እንደሚያመቻች ያመለክታል፡፡ (እስከ ክፍል 5.2.2 ድረስ አ.ቆ.ሉ.ቅን አንጠቀምበትም፣ ቡትስትራፕ-ሳስ (bootstrap-sass) አስማቱን ይሰራበት ዘንድ ግን አሁን ያስፈልገናል፡፡)

በዝርዝር 5.6¹³ ላይ እንደሚታየው፣ በብጁ ወ.ሉ.ቅ ፋይል ውስጥ ቡትስትራፕን (ከተዛማጅ ስፖሮኬቶች መገልገያ ጋር) ለማካተት የ‘@አስመጣ (@import) ሥልትን መጠቀም እንችላለን፡፡

ዝርዝር 5.6: 

የቡትስትራፕ ወ.ሉ.ቅን ማከል።  app/assets/stylesheets/bju.scss
@import "bootstrap-sprockets";
@import "bootstrap";

በዝርዝር 5.6 ውስጥ የሚገኙት ሁለቱ መስመሮች ሙሉውን የቡትስትራፕ የወ.ሉ.ቅ መዋቅርን በአፕልኬሽኑ ውስጥ ያካትታሉ፡፡ ለውጦቹን በማበልጸጊያ አፕልኬሽኑ ውስጥ ለማካተት የድር አገልጋዩን እንደገና ካስጀመርን በኋላ (ይህም “ተቆር-ሲን (Ctrl-C)” ከተጫንን በኋላ ልክ እንደ ክፍል 1.2.2 የ‘ሬይልስ አገልጋይ (rails server) ትእዛዝን በመጠቀም ማስኬድ ይሆናል) የተገኘው ውጤት በምስል 5.5 ላይ ይታያል። የጽሑፉ አቀማመጥ ጥሩ አይደለም፣ አርማውም ቅጡን ያጣ ነው፣ ነገር ግን ቀለሙ እና የመመዝገቢያ አዝራሩ ደህና ይመስላሉ።

images/figures/sample_app_only_bootstrap

የማሳያ አፕልኬሽኑ ከቡትስትራፕ ወ.ሉ.ቅ ጋር።

በመቀጠል በዝርዝር 5.7 ላይ እንደሚታየው፣ ገጽታውን እና እያንዳንዱን ገጽ በተናጠል ለማስቄጥ፣ በመላው ጣቢያ ጥቅም ላይ የሚውሉ አንዳንድ የወ.ሉ.ቅ ደንቦችን እናክላለን፡፡ ውጤቱ በምስል 5.6 ውስጥ ይታያል፡፡ (በዝርዝር 5.7 ውስጥ በጣም ብዙ የወ.ሉ.ቅ ደንቦች አሉ፤ አንድ የወ.ሉ.ቅ ደንብ ምን እንደሚያደርግ ለማወቅ፣ ብዙውን ጊዜ የወ.ሉ.ቅ አስተያትን በመጠቀም ስለ ኮዱ አስተያየት መጻፍ ጠቃሚ ነው። ይህንን የምናደርገውም የወ.ሉ.ቅ ደንቡ ምን እንደሚያደርግ የሚገልጸውን ጽሑፍ እነዚህ:- /* … */ ምልክቶች ውስጥ በማስገባት እና ምን እንደሚለውጥ በመመልከት ነው።)

ዝርዝር 5.7: 

በሁሉም ገጾች ላይ ተፈጻሚነት ላላቸው አንዳንድ ዓለምአቀፋዊ ቅጦች ወ.ሉ.ቅን ማከል።  app/assets/stylesheets/bju.scss
@import "bootstrap-sprockets";
@import "bootstrap";

/* ዓለምአቀፋዊ */

body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
}

.center h1 {
  margin-bottom: 10px;
}

አንዳንድ ክፍትቦታዎችን እና ዓለምአቀፋዊ ቅጥን ማከል።

በዝርዝር 5.7 ላይ ያለው ወ.ሉ.ቅ አንድ ወጥ የሆነ ቅርጽ እንዳለው ልብ በሉ፡፡ በአጠቃላይ የወ.ሉ.ቅ ደንቦች የሚመላከቱት በአንድ ክፍል፤ በአንድ መታወቂያ፤ በአንድ ሃ.ጽ.መ.ቋ መለያ ወይም በነዚህ ጥምረት እና አንዳንድ የቅጥ ትእዛዞች በማስከተል ነው። ለምሳሌ ይህ የወ.ሉ.ቅ ደንብ:-

body {
  padding-top: 60px;
}

በገጹ አናት ላይ የ 60 ፒክስል ክፍተትን ያስቀምጣል። በ‘ራስጌ (header) መለያ ውስጥ ባለው ከላይ-ቋሚ-የመዳረሻአሞሌ (navbar-fixed-top) ክፍል ምክንያት፣ ቡትስትራፕ የመዳሰሻ አሞሌውን በገጹ ጫፍ ላይ እንዲቀመጥ ያደርገዋል፣ ስለሆነም “ሙላት (Padding)” የሚያገለግለው ዋናውን ጽሑፍ ከመዳሰሻው ለመለየት ነው፡፡ (የመዳሰሻ አሞሌው ነባሪው ቀለም ከቡትስትራፕ 2.0 በኋላ ስለተቀየረ፣ በራ ካለ ይልቅ ጨለም ያለ ቀለም እንዲሆን ለማድረግ ተገላቢጦሽ-የመዳረሻአሞሌ (navbar-inverse) የተባለ ክፍል ያስፈልገናል።) ይህ በንዲህ እንዳለ፣ በዚህ ወ.ሉ.ቅ ደንብ ውስጥ:-

.center {
  text-align: center;
}

የ‘ማዕከል (center) ክፍልን ከ‘ጽሑፍ-አሰልፍ ማዕከል (text-align: center) ባህሪ ጋር ያዛምዳል። በሌላ አማርኛ፣ .ማዕከል (.center) ላይ ያለው ነጥብ . የሚያሳየው፣ ደንቡ አንድ ክፍልን እንደሚያስቄጥ ነው። (በዝርዝር 5.9 ላይ እንደምናየው፣ የ‘ፓውንድ # ምልክቱ የሚያመለክተው የአንድ ወ.ሉ.ቅ መታወቂያን ቅጥ ለማድረግ የሚሆን ደንብን ነው፡፡) ይህ ማለት ማናቸውም የ‘ማዕከል (center) ክፍልን ያካተተ መለያ (ማለት አንድ ክፍሊት (div)) ውስጥ ያሉ ጽሑፎች በሙሉ፣ በገጹ መሃል ላይ ይሆናሉ ማለት ነው፡፡ (በዝርዝር 5.2 ውስጥ አንድ የዚህ ክፍልን ምሳሌ አይተናል፡፡)

ምንም እንኳን ቡትስትራፕ ከምርጥ የወ.ሉ.ቅ ስነ ጽሑፍ ደንቦች ጋር ቢመጣም፣ በዝርዝር 5.8 ላይ እንደሚታየው፣ የጣቢያችን ጽሑፍ እይታ ላይ አንዳንድ ብጁ ደንቦችን ግን በተጨማሪ እናክላለን፡፡ (እነዚህ ሁሉ ደንቦች በመነሻ ገጹ ላይ ብቻ የሚተገበሩ አይደሉም፣ ነገር ግን እዚህ ውስጥ ያለው ደንብ እያንዳንዱ፣ በማሳያ አፕልኬሽኑ ውስጥ በአንድ ወቅት በተወሰነ ቦታ ላይ ጥቅም ላይ ይውላል፡፡) የዝርዝር 5.8 የወ.ሉ.ቅ ውጤት በምስል 5.7 ውስጥ ይታያል ፡፡

ዝርዝር 5.8: 

ስነ ጽሑፉን የሚያሳምር ወ.ሉ.ቅን ማከል።  app/assets/stylesheets/bju.scss
@import "bootstrap-sprockets";
@import "bootstrap";
.
.
.
/* ስነ ጽሑፍ */

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

h1 {
  font-size: 3em;
  letter-spacing: -2px;
  margin-bottom: 30px;
  text-align: center;
}

h2 {
  font-size: 1.2em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
  color: #777;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}

የተወሰነ የስነ ጽሑፍ ማሳመሪያ የታከለበት የመነሻ ገጽ።

በመጨረሻም የጣቢያውን አርማ ለማስቄጥ አንዳንድ ደንቦችን እናክላለን፣ ይህም “ማሳያ አፕልኬሽን” የሚለውን ጽሑፍ ብቻ የያዘ ይሆናል፡፡ በዝርዝር 5.9 ውስጥ ያለው ወ.ሉ.ቅ፣ ጽሑፉን ወደ ዓብይ ፊደላት ይቀይረዋል፣ መጠኑን፣ ቀለሙን እና አቀማመጡንም እንዲሁ ያሻሽላል፡፡ (የጣቢያው አርማ በገጹ ላይ በአንድ ቦታ ላይ ብቻ ስለሚታይ አንድ የወ.ሉ.ቅ መታወቂያን ተጠቅመናል፣ እናንተ ከፈለጋችሁ ግን በዚህ ፈንታ አንድ የወ.ሉ.ቅ ክፍልን መጠቀም ትችላላችሁ፡፡)

ዝርዝር 5.9: 

ለጣቢያው አርማ ወ.ሉ.ቅን ማከል።  app/assets/stylesheets/bju.scss
@import "bootstrap-sprockets";
@import "bootstrap";
.
.
.
/* ራስጌ */

#አርማ {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
}

#አርማ:hover {
  color: #fff;
  text-decoration: none;
}

እዚህ ጋር የ‘ቀለም ኤፍኤፍኤፍ (color: #fff) ደንቡ የአርማውን ቀለም ወደ ነጪ ይለውጣል። የሃ.ጽ.መ.ቋ ቀለምን በሶስት ጥንድ መሰረተ-16 (አስራስድስትዮሽ) ኮድ ማድረግ ይቻላል፤ ማለት ለእንያንዳንዱ ጥንድ መሰረታዊ ቀለሞች:- ቀይ፣ አረንጓዴ እና ሰማያዊን በመጠቀም ቀለሞችን ኮድ ማድረግ ይቻላል ማለት ነው፤ ይህንን አሰራር በምንጠቀምበት ጊዜ የቅደም ተከተሉ ቀይ፣ አረንጓዴ፣ ሰማያዊ መሆን አለበት። (ለምሳሌ:- ኤፍኤፍኤፍኤፍኤፍኤፍ (#ffffff) ማለት የመጀመሪያው ኤፍኤፍ (#ff) ቀይ፣ ሁለተኛው ኤፍኤፍ (#ff) አረንጓዴ ሲሆን፣ የመጨረሻው ኤፍኤፍ (#ff) ደግሞ ሰማያዊ ነው ማለት ነው። እነዚህ ሶስት ቀለሞች ሲዋሃዱ ነጪ ቀለምን እናገኛለን ማለት ነው፡፡) ይህ ኮድ:- ኤፍኤፍኤፍኤፍኤፍኤፍ (#ffffff) ሶስቱን ቀለሞች ያገናኝ እና አንድ ንጹህ ነጪ ቀለምን ይሰጣል፣ ኤፍኤፍኤፍ (#fff) ደግሞ የ‘ኤፍኤፍኤፍኤፍኤፍኤፍ (#ffffff) ኮድ አጪር የአጻጻፍ ስልት ነው። ኤፍኤፍኤፍን (#fff) ለ‘ነጪ (white) ጨምሮ፣ የወ.ሉ.ቅ መስፈርት እንዲሁ ለተለመዱ የሃ.ጽ.መ.ቋ ቀለሞች በርካታ ተመሳሳይ ቃላትን ይበይናል። በዝርዝር 5.9 ውስጥ ያለው ወ.ሉ.ቅ ያስገኘው ውጤት በምስል 5.8 ላይ ይታያል፡፡

የማሳያ አኘልኬሽኑ በሃሪፉ ቅጥ ከተደረገ አርማ ጋር።

መልመጃዎች

የሬይልስ ስልጠናን ለገዙ ሰወች በሙሉ የሁሉም የመልመጃ መልሶች እዚህ ላይ ይገኛሉ።

ዝርዝር 5.10 ላይ ያለው ኮድ እንደሚያሳየው፣ የአስተያት ምልክትን በመጠቀም፣ በክፍል 5.1.1.1 ላይ የሚታየውን የድመት ምስል በገጹ ላይ እንደማይታይ አድርጉ፡፡ አንድ የድር መመርመሪያን በመጠቀም፣ ምስሉን ለማሳየት የሚያገለግለው የሃ.ጽ.መ.ቋ ኮድ በገጹ ምንጪ ላይ ፍጹም አለመኖሩን አረጋግጡ፡፡
በዝርዝር 5.11 ላይ የተሰጠውን የወ.ሉ.ቅ ደንብ በ‘ብጁ.አቆሉቅ (bju.scss) ፋይል ውስጥ በማከል፣ በአፕልኬሽኑ ውስጥ ያሉትን ሁሉንም ምስሎች ደብቁ (በአሁኑ ጊዜ ያለው አንድ ምስል፣ በመነሻ ገጹ ላይ የሚገኘው የሬይልስ አርማ ብቻ እንደሆነ የታወቀ ነው)፡፡ ምንም እንኳን ምስሉ ባይታይም አንድ የድር መመርመሪያን በመጠቀም ምስሉን ለማሳየት የሚያገለግለው የሃ.ጽ.መ.ቋ ኮድ ግን በገጹ ምንጪ ላይ መኖሩን አረጋግጡ፡፡ (ምስሉ ካሁን በፊት እንደነበረው በትክክል ይታዩ ዘንድ፣ መልመጃውን ስትጨርሱ ወደ ነበረበት መቀልበሳችሁን አረጋግጡ)

ዝርዝር 5.10: 

ክት ሩቢው እንዳይሰራ አስተያየት ማድረጊያ ኮድ።
<%#= image_tag("kitten.jpg", alt: "ድመት") %>

ዝርዝር 5.11: 

ሁሉንም ምስሎች መደበቂያ ወ.ሉ.ቅ።
img {
  display: none;
}

5.1.3 ከፊሎች

ምንም እንኳን በዝርዝር 5.1 ውስጥ ያለው ገጽታ የሚፈለግበትን ስራ እየፈጸመ ቢሆንም፣ ትንሽ ግን እየተዝረከረከ መጥቷል፡፡ የሃ.ጽ.መ.ቋ መደገፊያው ሶስት መስመሮችን ብቻ ይዟል፣ እናም እነዚህ መስመሮች ያልተለመዱ እና ለኢንተርኔት ኤክስፕሎረል ብቻ የሚያገለግል አንድ እንግዳ አገባብን ይጠቀማሉ፤ ስለዚህ ወደ ሆነ ቦታ ቢወሰዱ ጥሩ ነው። በተጨማሪም የራስጌው ሃ.ጽ.መ.ቋ አንድ አመክንዮአዊ ክፍልን ይመሰርታል፤ ስለዚህ እሱም በአንድ ቦታ ውስጥ መታሸግ አለበት፡፡ በሬይልስ ውስጥ ይህንን ማሳካት የሚቻልበት መንገድ ከፊሎች (Partials) ተብለው የሚጠሩትን አገልግሎቶች በመጠቀም ነው፡፡ እስኪ መጀመሪያ ከፊሎች ከተበየኑ በኋላ ገጽታው ምን እንደሚመስል እንመልከት (ዝርዝር 5.12)።

ዝርዝር 5.12: 

የጣቢያው ገጽታ ከቅጠሉሁ እና ከራስጌ በከፊል ጋር። app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title><%= mulu_arest(yield(:title)) %></title>
    <meta charset="utf-8">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all',
                                           'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= render 'layouts/medegefiya' %>
  </head>
  <body>
    <%= render 'layouts/rasgie' %>
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

በዝርዝር 5.12 ላይ፣ የሃ.ጽ.መ.ቋ መደገፊያ ቅጠሉህ የነበረበትን ቦታ፣ በአንድ ዓቅርብ (render) በተባለ የሬይልስ ረጅ ዘዴ ጥሪ ተክተናል:-

<%= render 'layouts/medegefiya' %>

የዚህ መስመር ስራ የ‘አፕ/ትይታወች/ገጽታዎች/_መደገፊያ.ሃጽመቋ.ክሩ (app/views/layouts/_medegefiya.html.erb) ፋይልን መመልከት እና የፋይሉን ይዘት በማመዛዘን ውጤቱን ወደ ትይታው ውስጥ ማስገባት ነው፡፡¹⁴ (አስታውሱ ይህ:- <%= ... %> የክት ሩቢ አገባብ የሚያስፈልገው፣ አንድ የሩቢ ሂሳበሃረግን ለማመዛዘን እና ውጤቱን በዝግጁገጽታው ውስጥ ለማካተት ነው።) ከፊል ፋይልን ለመሰየም በፋይሉ ስም መጀመሪያ ላይ አንድ የታች-ሰረዝን _መደገፊያ.ሃጽመቋ.ክሩ (_medegefiya.html.erb) መጠቀሙ፣ በሬይልስ ውስጥ ልምዳዊ የሆነ ደንብ መሆኑን አስተውሉ፤ በተጨማሪም ፋይሎቹ በአንድ ማውጫ ውስጥ በሚኖሩበት ጊዜ፡ ከሩቁ በማየት እንድንለያቸው ያስችለናል።

ከፊሉ እንዲሰራ ለማድረግ ተዛማጁን ፋይል መፍጠር እና እሱኑ በአንዳንድ ይዘቶች መሙላት ይኖርብናል። የመደገፊያ ከፊሉን በተመለከተ፣ ከዝርዝር 5.1 ለተወሰዱት ሶስት መስመር የመደገፊያ ኮዶች፣ አንድ ከፊል ፋይልን መፍጠር እና ይዘቱን በነሱ መሙላት ነው። ውጤቱ በዝርዝር 5.13 ውስጥ ይታያል፡፡

ዝርዝር 5.13: 

የመደገፊያው ሃ.ጽ.መ.ቋ ከፊል።  app/views/layouts/_medegefiya.html.erb
<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
  </script>
<![endif]-->

በተመሳሳይ መልኩ፣ የራስጌውን ክፍል በዝርዝር 5.14 ላይ እንደሚታየው፣ ወደ አንድ ከፊል እንወስድ እና በአንድ ሌላ የ‘ዓቅርብ (render) ጥሪ እሱን ወደ ገጽታው እናስገባዋለን። (እንደተለመደው የናንተን የጽሑፍ አርታኢ በመጠቀም ከፊሎቹን መፍጠር ይኖርባችኋል።)

ዝርዝር 5.14: 

የጣቢያው ራስጌ ከፊል።  app/views/layouts/_rasgie.html.erb
<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "ማሳያ አፕልኬሽን", '#', id: "አርማ" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "መነሻ",  '#' %></li>
        <li><%= link_to "እርዳታ",  '#' %></li>
        <li><%= link_to "ይግቡ",   '#' %></li>
      </ul>
    </nav>
  </div>
</header>

አሁን ከፊል እንዴት መስራት እንደምንችል አውቀናል፣ እስኪ አሁን ከራስጌው ጋር አብሮ የሚሄድ አንድ የጣቢያ ግርጌ እናክል፡፡ አሁን ይህን ምን ብለን እንደንምጠራው መገመት ትችላላችሁ፣ _ግርጌ.ሃጽመቋ.ክሩ (_grgie.html.erb) እንለው እና በገጽታ ማውጫው ውስጥ እናስቀምጠዋለን (ዝርዝር 5.15)።¹⁵

ዝርዝር 5.15: 

የጣቢያው ግርጌ ከፊል።  app/views/layouts/_grgie.html.erb
<footer class="footer">
  <small>
    <a href="https://www.railstutorial.org/">የሩቢ ኦን ሬይልስ ስልጠና</a>
    በ <a href="https://www.michaelhartl.com/">ማይክል ሃርተል</a>።
  </small>
  <nav>
    <ul>
      <li><%= link_to "ስለኛ",   '#' %></li>
      <li><%= link_to "አግኙን",   '#' %></li>
      <li><a href="https://news.railstutorial.org/">ዜና</a></li>
    </ul>
  </nav>
</footer>

እንደ ራስጌው በግርጌው ውስጥም፣ የስለኛ እና የአግኙን ገጾችን ውስጣዊ አገናኝ ለመፍጠር የ‘ዓገናኝ (link_to) ዘዴን ተጠቅመናል፣ እና ለአሁኑ ዓ.አ.ሃ.አወቹን በዚህ '#' በመቁረጥ (ቦታ-ያዢን በመጠቀም) ባሉበት ሁኔታ ላይ እንዲቆዩ እናደርጋቸዋለን፡፡ (ልክ እንደ ራስጌ‘ው (header) የ‘ግርጌ (footer) መለያውም በሃ.ጽ.መ.ቋ5 አዲስ የተፈጠረ መለያ ነው፡፡)

ልክ ከቅጠሉህ እና ከራስጌ ከፊሉ (ዝርዝር 5.16) ጋር በተመሳሰለ መልኩ፣ የግርጌውን የከፊል ፋይልንም በገጽታው ውስጥ እንደዛው አድርገን ማቅረብ እንችላለን።

ዝርዝር 5.16: 

የጣቢያው ገጽታ ከአንድ የግርጌ ከፊል ጋር።  app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title><%= mulu_arest(yield(:title)) %></title>
    <meta charset="utf-8">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all',
                                           'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= render 'layouts/medegefiya' %>
  </head>
  <body>
    <%= render 'layouts/rasgie' %>
    <div class="container">
      <%= yield %>
      <%= render 'layouts/grgie' %>
    </div>
  </body>
</html>

በመቀጠል፣ በዝርዝር 5.17 ላይ እንደሚታየው፣ ለግርጌው አንዳንድ ቅጦችን እናክላለን፡፡ ውጤቱም በምስል 5.9 ውስጥ ይታያል፡፡

ዝርዝር 5.17: 

ለጣቢያው ግርጌ ወ.ሉ.ቅን ማከል።  app/assets/stylesheets/bju.scss
.
.
.
/* ግርጌ */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
}

footer a {
  color: #555;
}

footer a:hover {
  color: #222;
}

footer small {
  float: left;
}

footer ul {
  float: right;
  list-style: none;
}

footer ul li {
  float: left;
  margin-left: 15px;
}

images/figures/site_with_footer_bootstrap

የመነሻ ገጹ ከታከለ ግርጌ ጋር።

መልመጃዎች

የሬይልስ ስልጠናን ለገዙ ሰወች በሙሉ የሁሉም የመልመጃ መልሶች እዚህ ላይ ይገኛሉ።

ነባሪውን የሬይልስ ራስጌን በዝርዝር 5.18 የ‘ዓቅርብ (render) ጥሪ ተኩ። ጠቃሚ ምክር:- ነባሪውን ይዞታ ከመሰረዝ ይልቅ መቅዳቱ የተሻለ ነው።
በዝርዝር 5.18 ላይ የሚፈለገው ከፊል ስላልተፈጠረ፣ ፈተናው ቀይመሆን አለበት፡፡ ፈተናው ቀይየሆነው በዚሁ ምክንያት መሆኑን አረጋግጡ፡፡
የሚያስፈልገውን ከፊል በ‘ገጽታወች (layouts) ማውጫ ውስጥ በመፍጠር እና የፈጠራችሁት አዲስ ከፊል ላይ የቀዳችሁትን ይዞታ በመገልበጥ ፈተናው አሁን አረንጓዴ እንደሆነ አረጋግጡ፡፡

ዝርዝር 5.18: 

ነባሪውን የሬይልስ ራስጌን በአንድ የ‘ዓቅርብ (render) ጥሪ መተካት።  app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title><%= mulu_arest(yield(:title)) %></title>
    <meta charset="utf-8">
    # አዲሱ የከፊል ፋይል
    <%= render 'layouts/nebari_rails' %>
    <%= render 'layouts/medegefiya' %>
  </head>
  <body>
    <%= render 'layouts/rasgie' %>
    <div class="container">
      <%= yield %>
      <%= render 'layouts/grgie' %>
    </div>
  </body>
</html>

5.2 አ.ቆ.ሉ.ቅ እና የንብረት ቧንቧመስመር

በሬይልስ በጣም ጠቃሚ ከሆኑት በይነገጾቹ ውስጥ አንዱ የንብረት ቧንቧመስመር (asset pipeline) ነው፣ ይህም እንደ ወ.ሉ.ቅ እና ምስሎች ያሉ ቛሚ ንብረቶችን፣ ለምርት እና ለማስተዳደር እጅግ የቀለሉ እንዲሆኑ ያደርጋል። የንብረት ቧንቧመስመሩ ከዌብፓክ (ከጃቫስክሪፕት ንብረት አጣማሪ) እና ከያርን (በክፍል 1.1.2 ላይ የተጠቀሰው የጥገኝነት ማስተዳደርያ) ጋርም ጎን ለጎን በጥሩ ሁኔታ ይሰራል፣ ሁለቱም ደግሞ በሬይልስ ውስጥ በነባሪነት የተደገፉ ናቸው፡፡ ይህ ክፍል በመጀመሪያ የንብረት ቧንቧመስመርን አጠቃላይ እይታን ይሰጣል፣ ከዚያም፣ አ.ቆ.ሉ.ቅን (Sass) እንዴት መጠቀም እንደሚቻል ያሳያል፣ አ.ቆ.ሉ.ቅ ወ.ሉ.ቅን ለመጻፍ የሚያገለግል አንድ ሃይለኛ መሳሪያ ነው፡፡

5.2.1 የንብረት ቧንቧመስመር

በአንድ ተራ የሬይልስ አበልጻጊ አመለካከት ሲታይ፣ ስለ ንብረት ቧንቧመስመር ለመረዳት፣ ሶስት መሰረታዊ ገጸባህሪያት ይኖራሉ፤ እንሱም:- የአሴት ማውጫወች፣ ገላጪ ፋይሎች፣ እና የቅድመሂደት (Preprocessor) ቋንቋወች ናችው፡፡¹⁶ እስኪ እያንዳንዱን በተናጠል እንመልከት:-

የንብረት ማውጫወች

የሬይልስ የንብረት ቧንቧመስመር ለቋሚ ንብረቶች፣ ሶስት መደበኛ ማውጫወችን ይጠቀማል፤ እያንዳንዱ ማውጫም የራሱ የሆነ ስራ አለው:-

አፕ/ንብረቶች (app/assets): አሁን ላለው አኘሊኬሽን የተለዩ ንብረቶች
ቤተኮድ/ንብረቶች (lib/assets): በራሳችሁ የአበልጻጊ ቡድን የተጻፉ የንብረት ቤተኮዶች
ሻጪ/ንብረቶች (vendor/assets): ከሌሎች ሰወች የተበረከቱ/የተገዙ ንብረቶች ማስቀመጫ (በነበሪነት የለለ)

እያንዳንዱ ማውጫወች ሁለቱን የንብረት አይነቶች (ማለት የሰእሎች እና የወራጅ ሉህ ቅጦችን) የያዙ አንድ ንዑስ-ማውጫ አላቸው:-

$ ls app/assets/
config  images  stylesheets

በዚህ ጊዜ በክፍል 5.1.2 ውስጥ ከሚገኘው፣ ማለት ከብጁ ወ.ሉ.ቅ ፋይል አድራሻ በስተጀርባ ያለውን ሃሳብ ለመረዳት የምንችልበት ሁኔታ ላይ እንገኛለን፤ ብጁ.አቆሉቅ (bju.scss) ለማሳያ አፕልኬሽኑ የተወሰነ ነው፣ ስለሆነም ወደ አፕ/ንብረቶች/ሉህቅጦች (app/assets/stylesheets) ይሄዳል ማለት ነው።

ገላጪ ፋይሎች

አንዴ ንብረቶቻችሁን አመክንዮአዊ ቦታቸው ውስጥ ካስቀመጣችሁ በኋላ፣ እነሱን እንዴት ወደ አንድ ነጠላ ፋይል እንደሚቀይር ሬይልስን በስፕሮኬት እንቁ በኩል ለመንገር ገላጪ ፋይሎችን (Manifest File) መጠቀም ትችላላችሁ። (ይህ ለወ.ሉ.ቅ እና ለጃቫስክሪፕት ይሰራል፣ ለምስሎች ግን አይሰራም) ምሳሌ ይሆነን ዘንድ፣ የአፕልኬሽኑን ቅጠሉሆች ነባሪ ገላጪ ፋይልን እንመልከት (ዝርዝር 5.19)።

ዝርዝር 5.19: 

ገላጪ ፋይሉ ለአፕልኬሽኑ ከተወሰኑ ወ.ሉ.ቅ ጋር።  app/assets/stylesheets/application.css
/*
 * This is a manifest file that'll be compiled into application.css, which will
 * include all the files listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any
 * plugin's vendor/assets/stylesheets directory can be referenced here using a
 * relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at
 * the bottom of the compiled file so the styles you add here take precedence
 * over styles defined in any other CSS/SCSS files in this directory. Styles in
 * this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

እዚህ ጋር በዚህ ( /* */) ምልክት ውስጥ የሚገቡት ጽሑፎች በሙሉ የወ.ሉ.ቅ አስተያየቶች ናቸው፣ ስፕሮኬት ግን ትክክለኛዎቹን ፋይሎች ለማካተት ተጠቅሞባቸዋል:-

/*
 .
 .
 .
 *= require_tree .
 *= require_self
*/

እዚህ ጋር ይሄ:-

*= require_tree .

በ‘አፕ/ንብረቶች/ሉህቅጦች (app/assets/stylesheets) ማውጫ ውስጥ ያሉት ሁሉም የወ.ሉ.ቅ ፋይሎች (የንዑስ-ማውጫ ቅርንጫፉን ጨምሮ) በአፕልኬሽኑ ወ.ሉ.ቅ ውስጥ መካተታቸውን ያረጋግጣል፡፡ ይህ መስመር ላይ

*= require_self

በ‘አፕልኬሽን.ወሉቅ (application.css) ፋይል ውስጥ ባለው፣ ወ.ሉ.ቅ ቅደም ተከተል መሰረት፣ ይዘቱን ይጪናል፣ እራሱንም እዛው ያካትታል፡፡

ሬይልስ ተስማሚ የሆነ መሰረታዊ ገላጪ ፋይሎችን በነባሪነት ይዞ ይመጣል፣ ስለዚህ በዚህ የሬይልስ ስልጠና ላይ ምንም ዓይነት ለውጥ አናደርግም፣ እናንተ ስለዚህ ጉዳይ የበለጠ ለማወቅ ከፈለጋችሁ ግን የሬይልስ የንብረት ቧንቧመስመር ጥሩ መጣጥፍ አቅርቦላችኋል፡፡

የቅድመሂደት ቋንቋወች

እናንተ ንብረቶቻችሁን በአንድ ላይ ካሰባሰባችሁ በኋላ፣ ሬይልስ አነሱን በበርካታ የቅድመሂደት ቋንቋወች (ፕሮግራሞች) ውስጥ በማስኬድ ለጣቢያው ዝግጁገጽታ ያዘጋጃቸው እና እነሱን አጣምሮ ወደ አሳሹ ለመስደድ የገላጪ ፋይሎችን ይጠቀማል፡፡ ሬይልስን የትኛውን ቋንቋ ለየትኛው ፋይል መጠቀም እንዳለበት ለማሳወቅ ደግሞ፣ የፋይሉን ቅጥያ ስም እንነግረዋለን፣ በዚህ ሁኔታ ላይ ሁለቱ የተለመዱ ቅጥያወች ደግሞ፣ ማለት ለአ.ቆ.ሉ.ቅ .አቆሉቅ (.scss) እና ለክት ሩቢ ደግሞ .ኢአርቢ (.erb) ናቸው፡፡ በክፍል 3.4.3 ውስጥ ክት ሩቢን ተመልክተናል፣ አ.ቆ.ሉ.ቅን ደግሞ በክፍል 5.2.2 ላይ እንመለከታለን፡፡

በምርት ላይ ብቃት

በንብረት ቧንቧመስመር በጣም ጥሩ ከሆኑ በይነገጾች ውስጥ አንዱ፣ አንድ አፕልኬሽን በምርት ላይ በሚሆንበት ወቅት አፕልኬሽኑ ቀልጣፋ እንዲሆን ንብረቶችን በራስሰር ማመቻቸቱ ነው። ባህላዊ የሆነ አሰራርን ተከትሎ ወ.ሉ.ቅን ለማደራጀት፣ ተግባራትን ወደ ተለያዩ ፋይሎች መከፋፈልን እና ጥሩ አድርጎ (ከብዙ ግምስምስ ጋር) መቅረጽን ያሳትፋል። ይህ ለአበልጻጊው ማለት ለባለ ሞያው ምቹ ቢሆንም፣ በምርት ላይ ግን አጥጋቢ ውጤት የሚሰጥ አይደለም፡፡ በተለይም በርካታ ትላልቅ ፋይሎችን በአንድ አፕልኬሽን ላይ ማከል፣ የገጽ-ጪነት (Page-load) ጊዜን በጣም ሊያዘገይ ይችላል፣ ይህም የተጠቃሚ ተሞክሮ ጥራት ላይ ተጽዕኖ ከሚያሳድሩ ነገሮች ውስጥ አንዱ ነው፡፡

በንብረት ቧንቧመስመር ላይ በፍጥነት እና በምቾት መካከል ምርጫ አያስፈልገንም፤ በማበልጸግ ጊዜ በጥሩ ሁኔታ በተዘጋጁ ብዙ ፋይሎች ላይ ስራችንን መስራት እንችላለን፣ እና ከዚያ በኋላ በምርት ላይ ቀልጣፋ ፋይሎችን ለመስራት የንብረት ቧንቧመስመርን እንጠቀማለን፡፡ በተለይም የንብረት ቧንቧመስመሩ ሁሉንም የአፕልኬሽኑን ቅጠሉሆች ወደ አንድ ወ.ሉ.ቅ ፋይል (አፕልኬሽን.ወሉቅ (application.css)) ካጣመረ በኋላ በማሸጋሸግ የፋይል መጠንን የሚነፉ አላስፈላጊ ክፍትቦታወችን እና ግምስምሶችን ያጠፋል። ውጤቱ ሰርግ እና ምላሽ ነው፤ ማለት በማበልጸግ ጊዜ ምቾት፣ በምርት ላይ ደግሞ ቅልጣፌ።

5.2.2 አገባበ ቆንጆ ቅጠሉህ

አ.ቆ.ሉ.ቅ ወ.ሉ.ቅን በብዙ መንገድ የሚያሻሽሉ ቅጠሉሆችን የመጻፊያ ቋንቋ ነው። በዚህ ክፍል ሁለት በጣም አስፈላጊ ማሻሻያወችን እንሸፍናለን፣ እነሱም እቅፍቅፍ (Nesting) እና ተለዋዋጮች (Variables) ይባላሉ። (ሶስተኛው ደግሞ ውስጠድብልቅ (Mixins) ይባላል፣ እሱን በክፍል 7.1.1 ላይ እንመለከተዋለን።)

በክፍል 5.1.2 ላይ በግልጽ እንዳየነው፣ አ.ቆ.ሉ.ቅ (Sass) አንድ ዓ.ቆ.ሉ.ቅ (SCSS) የተባለ ቅርጸትን ይደግፋል (ይህም በ‘.አቆሉቅ (.scss) የፋይል ቅጥያ ስም ይመላከታል)፣ ዓ.ቆ.ሉ.ቅ ራሱ አንድ የወ.ሉ.ቅ ጥብቅ ላእላይ-ስብሰብ (Superset)¹⁷ ነው፤ ይህ ሲባል ዓ.ቆ.ሉ.ቅ ሙሉ ለሙሉ አዲስ አገባብን ከመበየን ይልቅ፣ ወ.ሉ.ቅ ላይ ገጸባህርያትን ብቻ ያክላል።¹⁸ ይህ ማለት እያንዳንዱ ብቁ የወ.ሉ.ቅ ፋይል እንዲሁ ብቁ የዓ.ቆ.ሉ.ቅ ፋይል ነው ማለት ነው፡፡ እና እሱም አሁን ካለው የቅጥ ደንቦች ጋር ላሉት ፕሮጀክቶች የሚመች ይሆናል፡፡ በኛ በኩል ቡትስትራፕን ለመጠቀም ስንል ከመጀመርያው ጀምሮ ዓ.ቆ.ሉ.ቅን ተጠቅመናል። የሬይልስ የቧንቧመስመር የ‘.አቆሉቅ (.scss) ቅጥያ ያለቸው ፋይሎችን ለማዘጋጀት አ.ቆ.ሉ.ቅን በራስሰር ስለሚጠቀም የ‘ብጁ.አቆሉቅ (bju.scss) ፋይሉ ለአሳሹ እንዲቀርብ ከመታሸጉ በፊት በአ.ቆ.ሉ.ቅ ቅድመሂደት በኩል ይሄዳል፡፡

እቅፍቅፍ

በቅጠሉሆች ላይ የተለመደው አንዱ ጥለት፣ በታቀፉ አባላት ላይ ተፈጻሚነት ያላቸው ደንቦች መኖራቸው ነው፡፡ ለምሳሌ:- በዝርዝር 5.7 ውስጥ ለ‘.ማዕከል (.center) እና ለ‘.ማዕከል ራስጌ1 (.center h1) ለሁለቱም ደንቦች አሉን:-

.center {
  text-align: center;
}

.center h1 {
  margin-bottom: 10px;
}

ይህን በአ.ቆ.ሉ.ቅ በዚህ መተካት እንችላለን

.center {
  text-align: center;
  h1 {
    margin-bottom: 10px;
  }
}

እዚህ ጋር የታቀፈው ራስጌ1 (h1) የ‘.ማዕከል (.center) ይዞታን በራስሰር ይወርሳል፡፡

አንድ ሁለተኛ የምናስታቅፈው እጩ አለን፣ እሱን ለማሳቀፍ ግን አንድ ትንሽ ለየት ያለ አገባብ መጠቀምን ይጠይቃል፡፡ በዝርዝር 5.9 ላይ ይህን ኮድ እናያለን:-

#አርማ {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
}

#አርማ:hover {
  color: #fff;
  text-decoration: none;
}

እዚህ ላይ #አርማ የተባለው የአርማው መታወቂያ ሁለት ጊዜ ይታያል፤ አንድ ጊዜ በራሱ እና አንዴ ደግሞ አንዣብብ (hover) ከተባለው ባሕሪ ጋር (ይህም የመዳፊት ጠቋሚው አባሉ ላይ ሲያንዣብብ መልኩን ይቆጣጠራል።) ሁለተኛው ደንብ በመጀመሪያው ደንብ እንዲታቀፍ ለማድረግ #አርማ የተባለውን ወላጅ መታወቂያን ማጣቀስ ይኖርብናል። ይህ በዓ.ቆ.ሉ.ቅ ውስጥ የሚከናወነው የ‘እና & ሆሄን እንደሚከተለው አድርጎ በመጠቀም ነው:-

#አርማ {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  &:hover {
    color: #fff;
    text-decoration: none;
  }
}

አ.ቆ.ሉ.ቅ ከዓ.ቆ.ሉ.ቅ ወደ ወ.ሉ.ቅ የሚለውጥ አካል እንደምሆኑ መጠን፣ :አንዣብብ‘ን (&:hover) ወደ አርማ፡አንዣብብ (#አርማ:hover) ይለውጠዋል፡፡

እነዚህን ሁለቱንም የማስተቃቀፍ ዘዴዎች፣ በዝርዝር 5.17 ውስጥ በሚገኘው የግርጌ ወ.ሉ.ቅ ላይ ተግባራዊ በማድረግ ኮዱን ወደሚከተለው ዓይነት ኮድ ማሸጋገር ይችላል:-

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
  a {
    color: #555;
    &:hover {
      color: #222;
    }
  }
  small {
    float: left;
  }
  ul {
    float: right;
    list-style: none;
    li {
      float: left;
      margin-left: 15px;
    }
  }
}

በዝርዝር 5.17 ላይ የሚገኘውን ኮድ በሚገባ ተረድቶ በእጅ አንድ ባንድ ወደ አ.ቆ.ሉ.ቅ መለወጡ፣ አንድ ጥሩ መልመጃ ሊሆን ይችላል፣ ኮዱ ከተለወጠ በኋላም ወ.ሉ.ቁ አሁንም በትክክል እየሰራ መሆኑን ማረጋገጥም ይኖርባችኋል (ክፍል 5.2.2.3)፡፡

ተለዋዋጮች

አ.ቆ.ሉ.ቅ ድግግሞሽን ለማስወገድ እና በጣም ገላጪ የሆነ ኮድን ለመጻፍ ተለዋዋጮችን እንድንበይን ይፈቅድልናል። ለምሳሌ:- ዝርዝር 5.8 ‘ን እና ዝርዝር 5.17 ‘ን ስንመለከት፣ ለአንድ ዓይነት ቀለም ተደጋጋሚ ማጣቀሻወች እንዳሉ እንመለከታለን:-

h2 {
  .
  .
  .
  color: #777;
}
.
.
.
footer {
  .
  .
  .
  color: #777;
}

በዚህ ሁኔታ ላይ፣ #777 ማለት አንድ ፈዛዛ ግራጫ ቀለም ማለት ነው፣ አንድ ተለዋዋጪን በመበየን እንደሚከተለው አድርገን አንድ ስም ልንሰጠው እንችላለን:-

$ፈዛዛ-ግራጫ: #777;

ይህ የእኛን ዓ.ቆ.ሉ.ቅ እንደዚህ በማድረግ አሻሽለን እንድንጽፍ ያስችለናል:-

$ፈዛዛ-ግራጫ: #777;
.
.
.
h2 {
  .
  .
  .
  color: $ፈዛዛ-ግራጫ;
}
.
.
.
footer {
  .
  .
  .
  color: $ፈዛዛ-ግራጫ;
}

እንደ $ፈዛዛ-ግራጫ ያለ ተለዋዋጪ ስም #777 ከሚለው ቁጥር የተሻለ ገላጪ ስለሆነ፣ ለማይደጋገሙ ዋጋወች ሳይቀር ገላጪ የሆነ የተለዋዋጪ ስምን መጠቀሙ እንኳን ብዙውን ጊዜ ጠቃሚ ነው፡፡ በእርግጥ የቡትስትራፕ መዋቅር ቁጥራቸው በርከት ያለ ተለዋዋጮችን ለቀለሞች ይበይናል፣ ዝርዝራቸው ደግሞ በቡትስትራፕ የከሲታ ተለዋዋጮች ገጽ ላይ ይገኛል፡፡ ያ ገጽ ተለዋዋጮችን የሚበይነው ከሲታ ወ.ሉ.ቅን እንጂ አ.ቆ.ሉ.ቅን በመጠቀም አይደለም፣ ነገር ግን የ ቡትስትራፕ-ሳስ (bootstrap-sass) እንቁ የአ.ቆ.ሉ.ቅ እኩያውን ይሰጠናል፡፡ ዝምድናውን ለመገመትም አያስቸግርም ከሲታ አንድ ተለዋዋጪን ለመበየን አንድ የ @ ምልክትን ሲጠቀም አ.ቆ.ሉ.ቅ ደግሞ አንድ የ‘ዶላር $ ምልክትን ይጠቀማል። ለምሳሌ የቡትስትራፕ ጣቢያ ላይ ሂደን የተለዋዋጪ አጠቃቀም ገጽን ስንመለከት፣ ለፈዛዛ ግራጫ የተሰየመ አንድ ተለዋዋጪን እናያለን:-

 @gray-light: #777;

ይህ ማለት በቡትስትራፕ-ሳስ (bootstrap-sass) እንቁ በኩል አንድ ፈዛዛ-ግራጫ ($gray-light) የተባለ ተዛማጅ የዓ.ቆ.ሉ.ቅ ተለዋዋጪ ሊኖር ይገባል ማለት ነው። ስለሆነም የኛን ብጁ ተለዋዋጪ በሱ ለመተካት እንደሚከተለው ማድረግ እንችላለን:-

h2 {
  .
  .
  .
  color: $gray-light;
}
.
.
.
footer {
  .
  .
  .
  color: $gray-light;
}

የአ.ቆ.ሉ.ቅ ማሳቀፍን እና የተለዋዋጪ መበየን በይነገጾችን በመላው የዓ.ቆ.ሉ.ቅ (SCSS) ፋይሉ ላይ መተግበሩ በዝርዝር 5.20 ውስጥ ያለውን ፋይል ይሰጣል፡፡ ይህ ሁለቱንም የአ.ቆ.ሉ.ቅ ተለዋዋጮችን (በቡትስትራፕ ከሲታ ተለዋዋጪ ገጽ ላይ እንደተረጋገጠው) እና አብሮገነብ ቀለሞችን (ማለትም ኤፍኤፍ‘ን (#fff) ለ‘ነጪ white) ይጠቀማል። በተለይ በ‘ግርጌ (footer) መለያ ደንቦች ላይ የተከሰተውን አስገራሚ መሻሻል ልብ በሉ፡፡

ዝርዝር 5.20: 

በኩሩ የዓ.ቆ.ሉ.ቅ ፋይል እቅፍቅፍ እና ተለዋዋጮችን እንዲጠቀም ተለውጦ።  app/assets/stylesheets/bju.scss
@import "bootstrap-sprockets";
@import "bootstrap";

/* ውስጠድብልቅ፣ ተለዋዋጮች፣ ወዘተ... */

$gray-medium-light: #eaeaea;

/* ዓለምአቀፋዊ */

body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
  h1 {
    margin-bottom: 10px;
  }
}

/* ስነ ጽሑፍ */

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

h1 {
  font-size: 3em;
  letter-spacing: -2px;
  margin-bottom: 30px;
  text-align: center;
}

h2 {
  font-size: 1.2em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
  color: $gray-light;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}


/* ራስጌ */

#አርማ {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: white;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  &:hover {
    color: white;
    text-decoration: none;
  }
}

/* ግርጌ */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid $gray-medium-light;
  color: $gray-light;
  a {
    color: $gray;
    &:hover {
      color: $gray-darker;
    }
  }
  small {
    float: left;
  }
  ul {
    float: right;
    list-style: none;
    li {
      float: left;
      margin-left: 15px;
    }
  }
}

አ.ቆ.ሉ.ቅ የእኛን ቅጠሉሆች ለማቃለል ብዙ መንገዶችን ቢሰጠንም እንኳን፣ በዝርዝር 5.20 ውስጥ ያለው ኮድ ግን በጣም አስፈላጊ የሆኑ ገጸባህሪያትን ስለሚጠቀም፣ ይህ ለኛ አንድ ታላቅ ጅማሬ ይሆነናል፡፡ ለተጨማሪ መረጃ የአ.ቆ.ሉ.ቅ ድረ-ጣቢያን ተመልከቱ።

መልመጃዎች

የሬይልስ ስልጠናን ለገዙ ሰወች በሙሉ የሁሉም የመልመጃ መልሶች እዚህ ላይ ይገኛሉ።

በክፍል 5.2.2 ላይ እንደተመከረው፣ በዝርዝር 5.17 ላይ ያለውን የግርጌ ወ.ሉ.ቅ ዝርዝር 5.20 ወዳለው ዓ.ቆ.ሉ.ቅ ስትለውጡ ኮዱን በደንብ ትረዱ ዘንድ፣ ኮዱን ቀድቶ ከመገልበጥ ይልቅ አንድባንድ ርዴት በተሞላበት መንገድ በእጃችሁ በመጻፍ ለውጡ።

5.3 የገጽታ አገናኞች

አሁን የጣቢያውን ገጽታ በጥሩ ቅጥ ስለጨረስን፣ በዚህ '#' የቦታ-መያዣ ምልክት የቆረጥናቸውን አገናኞች በትክክለኛ አገናኞች መሙላትን የመጀመሪያው ጊዜ አሁን ነው፡፡ ሃ.ጽ.መ.ቋ በጥሬው፣ በሬይልስ ክ.ሩ (ERb) ዝግጁገጽታወች ውስጥ የሚሰራ ስለሆነ፣ እንደዚህ ያሉ አገናኞችን በጠንካራ-ኮድ (hard-code)¹⁹ ማድረግ እንችላለን:-

<a href="/quami_getss/silegna">ስለኛ</a>

ነገር ግን ይህ አሰራር የሬይልስ የአሰራር መንገድ አይደለም፡፡ የስለኛ ገጹ ዓ.አ.ሃ.አ

/ቋሚ_ገጾች/ስለኛ (/quami_getss/silegna) ከመሆን ፋንታ፣ /ስለኛ (/silegna) ቢሆን ጥሩ ነበረ። ከዚህም በላይ፣ ሬይልስ በባህሉ የሚጠቀመው ስዩም ማዘዋወርያወችን (Named Routes) ነው፤ እሱም እንደዚህ ዓይነት ኮድ መጠቀምን ያሳትፋል:-

<%= link_to "ስለኛ", silegna_path %>

በዚህ መንገድ ኮዱ አንድ የበለጠ ግልጽ ትርጉም ይኖረዋል፣ እናም የ‘ስለኛ_መንገድ (silegna_path) ብየናን መለወጥ እና ዓ.አ.ሃ.አው በየትኛውም የ‘ስለኛ_መንገድ (silegna_path) ቦታ ጥቅም ላይ እንዲውል ማድረግ ስለምንችል፣ በበለጠ እንደ ልብ የሚገራ ኮድም ይሆናል፡፡

ያቀድናቸው አገናኞች ሙሉ ዝርዝር በሰንጠረዥ 5.1 ውስጥ ከሚያመላክቷቸው ዓ.አ.ሃ.አወች እና ከማዘዋወርያወቻቸው ጋር ይታያሉ፡፡ በክፍል 3.4.4 ላይ የመጀመሪያውን ማዘዋወሪያ አስተናግደን ጨርሳለን፣ እናም በዚህ ምዕራፍ መጨረሻ ላይ ካለ መጨረሻው ማዘዋወሪያ በስተቀር ሁሉንም ተግባር ላይ እናውላቸዋለን፡፡ (የመጨረሻውን ማዘዋወሪያ ምዕራፍ 8 ላይ ተግባራዊ እናደርገዋለን)

ገጽ	ዓ.አ.ሃ.አ	ስዩም ማዘዋወሪያ
መነሻ	/	`root_path`
ስለኛ	/silegna	`silegna_path`
እርዳታ	/erdata	`erdata_path`
አግኙን	/agignun	`agignun_path`
ይመዝገቡ	/temezgeb	`temezgeb_path`
ይግቡ	/yigbu	`yigbu_path`

የጣቢያ አገናኞች የማዘዋወርያ እና የዓ.አ.ሃ.አ አመላካቾች።

5.3.1 የአግኙን ገጽ

ሁሉ የተሟላ ይሆን ዘንድ፣ በምዕራፍ 3 ላይ ለመልመጃ ተብሎ የተተወውን የአግኙን ገጽን አሁን እናክለዋለን፡፡ ፈተናው በዝርዝር 5.21 ውስጥ እንደሚታየው፣ ባጪሩ በዝርዝር 3.26 ውስጥ የታየውን ቅድ ይከተላል፡፡

ዝርዝር 5.21: 

የአግኙን ገጽ ፈተና። ቀይ test/controllers/quami_getss_controller_test.rb
require 'test_helper'

class QuamiGetssControllerTest < ActionDispatch::IntegrationTest

  test "መነሻ ገጽን ማግኘት አለበት" do
    get quami_getss_menesha_url
    assert_response :success
    assert_select "title", "የሩቢ ኦን ሬይልስ ስልጠና ማሳያ አፕልኬሽን"
  end

  test "እርዳታ ገጽን ማግኘት አለበት" do
    get quami_getss_erdata_url
    assert_response :success
    assert_select "title", "እርዳታ | የሩቢ ኦን ሬይልስ ስልጠና ማሳያ አፕልኬሽን"
  end

  test "ስለኛ ገጽን ማግኘት አለበት" do
    get quami_getss_silegna_url
    assert_response :success
    assert_select "title", "ስለኛ | የሩቢ ኦን ሬይልስ ስልጠና ማሳያ አፕልኬሽን"
  end

  test "አግኙን ገጽን ማግኘት አለበት" do
    get quami_getss_agignun_url
    assert_response :success
    assert_select "title", "አግኙን | የሩቢ ኦን ሬይልስ ስልጠና ማሳያ አፕልኬሽን"
  end
end

በዚህ ጊዜ፣ በዝርዝር 5.21 ላይ ያሉት ፈተኖች ቀይመሆን አለባቸው:-

ዝርዝር 5.22: ቀይ
$ rails test

የአፕልኬሽኑ ኮድ በክፍል 3.3 ውስጥ የስለኛ ገጽን ከማከል ጋር ትይዩ ነው፣ መጀመሪያ አንድ ማዘዋወሪያ እናክላለን (ዝርዝር 5.23)፣ ከዚያ አንድ አግኙን (agignun) የተባለ ተግባርን በቛሚ ገጾች መቆጣጠሪያ (ዝርዝር 5.24 ላይ) ውስጥ እናክል እና በመጨረሻ አንድ የአግኙን ትይታን እንፈጥራለን (ዝርዝር 5.25)።

ዝርዝር 5.23: 

ለአግኙን ገጽ አንድ ማዘዋወሪያን ማከል። ቀይ config/routes.rb
Rails.application.routes.draw do
  root 'quami_getss#menesha'
  get  'quami_getss/menesha'
  get  'quami_getss/erdata'
  get  'quami_getss/silegna'
  get  'quami_getss/agignun'
end

ዝርዝር 5.24: 

ለአግኙን ገጽ አንድ ተግባርን ማከል። ቀይ app/controllers/quami_getss_controller.rb
class QuamiGetssController < ApplicationController
  .
  .
  .
  def agignun
  end
end

ዝርዝር 5.25: 

የአግኙን ገጽ ትይታ። አረንጓዴ app/views/quami_getss/agignun.html.erb
<% provide(:title, 'አግኙን') %>
<h1>አግኙን</h1>
<p>
  ማሳያ አፕልኬሽኑን በተመለከተ በሩቢ ኦን ሬይልስ ስልጠና
  <a href="https://www.railstutorial.org/contact">አግኙን ገጽ</a>
  በኩል ልትገናኙን ትችላላችሁ፡፡
</p>

አሁን ፈተኖቹ አረንጓዴመሆናቸውን አረጋግጡ:-

ዝርዝር 5.26: አረንጓዴ
$ rails test

5.3.2 የሬይልስ ማዘዋወርያወች

ለማሳያ አፕልኬሽኑ ቋሚ ገጾች ስዩም ማዘዋወርያወችን ለማከል፣ የ‘አዋቅር/ማዘዋወሪያወቻ.አርቢ (config/routes.rb) ማለት የማዘዋወርያወች ፋይልን እናርማለን፣ ይህን ፋይልም ሬይልስ የዓ.አ.ሃ.አ ማመላካቻወችን ለመበየን ይጠቀምበታል፡፡ ወደ መነሻ ገጽ የሚወስደውን ማዘዋወሪያ መልሰን በመቃኘት እንጀምራለን (በክፍል 3.4.4 ላይ በተበየነው)፣ ይህም ከሌሎቹ ማዘዋወርያወች ለየት ያለ ነው፣ እና ከዚያ ለተቀሩት ቋሚ ገጾች የተጣመሩ ማዘዋወርያወችን እንበይናለን፡፡

እስካሁን ድረስ አንድ የስር ማዘዋወሪያ እንዴት እንደሚበየን ሶስት ምሳሌወችን አይተናል፤ እነሱም ይህንን ኮድ:-

root 'application#selamta'

በሰላምታ አፕልኬሽን (ዝርዝር 1.15) ይህንን ኮድ

root 'teteqamis#index'

በጨዋታ አፕልኬሽን (ዝርዝር 2.7) ይህንን ኮድ ደግሞ

root 'quami_getss#menesha'

በማሳያ አፕልኬሽን (ዝርዝር 3.43) ነበሩ፡፡ በእያንዳንዱ ሁኔታ የ‘ስር (root) ዘዴው የስር መንገዱ “/” እኛ ወደፈለግነው አንድ ተግባር እና መቆጣጠሪያ እንዲያዘዋውር ያመቻችልናል፡፡ የስር ማዘዋወሪያውን በዚህ መንገድ መበየኑ አንድ ሁለተኛ አስፈላጊ ጥቅም አለው፤ ይህም ስዩም ማዘዋወርያወችን እንድንፈጥር እና ማዘዋወርያወችን ከጥሬ ዓ.አ.ሃ.አቸው ይልቅ በማዘዋወሪያ ስማቸው እንድናመላክታቸው መፍቀዱ ነው። በዚህ ሁኔታ ላይ፣ እነዚህ ማዘዋወሪያች የ‘ስር_መንገድ (root_path) እና የ‘ስር_ዓአሃአ (root_url) ናቸው፣ በሁለቱ መካከል ያለው ብቸኛ ልዩነት፣ የኋለኛው ሙሉ ዓ.አ.ሃ.አውን ማጠቃለሉ ብቻ ነው:-

root_path -> '/'
root_url  -> 'http://www.misalie.com/'

በሬይልስ ስልጠና ውስጥ እኛ የ‘ _ዓአሃአ (_url) ቅርጽን ለማዟዟር (Redirect) ከመጠቀም በስተቀር የተለመደውን የ‘ _መንገድ (_path) ቅርጽን እንከተላለን፡፡ (ይህ የሆነበት ምክንያት፣ የሃ.ጽ.ማ.ስ መስፈርቱ ከተዟዟረ በኋላ አንድ የተሟላ ዓ.አ.ሃ.አን ስለሚፈልግ ነው፣ ይሁን እንጅ በአብዛኞቹ አሳሾች ላይ በየትኛውም መንገድ ይሰራል።)

ጥቅም ላይ የዋሉት ነባሪ ማዘዋወርያወች፣ ለምሳሌ እነ ዝርዝር 5.21 በቃላት የተንዛዙ ስለሆኑ ለእገዛ፣ ለስለኛ እና ለአግኙን ገጾች አጠር ያሉ ስዩም ማዘዋወርያወችን ለመበየን ይህንን አጋጣሚ እንጠቀማለን። ይህንን ለማድረግ ዝርዝር 5.23 ውስጥ ላሉ የ‘አግኝ (get) ደንቦች ላይ ለውጦች ለማድረግ ይህንን ኮድ:-

get 'quami_getss/erdata'

ወደ ዚህ ኮድ:-

get  '/erdata', to: 'quami_getss#erdata'

መለወጥ ያስፈልገናል። ይህ አዲስ ንድፍ ለ/እርዳታ (/erdata) ዓ.አ.ሃ.አ አንድ የዓግኝ (GET) መጠይቅን ወደ ቛሚ ገጾች መቆጣጠሪያ ውስጥ ወዳለው የ‘እርዳታ (erdata) ተግባር ያስተላልፋል። ልክ እንደ የስር ማዘዋወሪያው ደንብ፣ ይህም እርዳታ_መንገድ (erdata_path) እና እርዳታ_ዓአሃአ (erdata_url) የተባሉ ሁለት ስዩም ማዘዋወርያወችን ይፈጥራል:-

erdata_path -> '/erdata'
erdata_url  -> 'http://www.misalie.com/erdata'

ይህንን ደንብ በዝርዝር 5.23 ላይ ላሉት የቋሚ ገጽ ማዘዋወርያወች ላይ መፈጸሙ፣ በዝርዝር 5.27 ያለውን ውጤት ይሰጣል።

ዝርዝር 5.27: 

ለቛሚ ገጾች የሚሆኑ ማዘዋወርያወች። ቀይ config/routes.rb
Rails.application.routes.draw do
  root 'quami_getss#menesha'
  get  '/erdata',  to: 'quami_getss#erdata'
  get  '/silegna', to: 'quami_getss#silegna'
  get  '/agignun', to: 'quami_getss#agignun'
end

ሁልጊዜ በምትኩ የ‘ስር_መንገድ‘ን (root_path) ወይም የ‘ስር_ዓአሃአ‘ን (root_url) ስለምንጠቀም፣ ዝርዝር 5.27 የ‘ቋሚገጾች/መነሻ ('quami_getss/menesha') ማዘዋወሪያን ማስወገድ እንዳለበት ልብ ልትሉ ይገባል፡፡

በዝርዝር 5.21 ላይ የተዘረዘሩት ፈተኖች የድሮ ማዘዋወርያወችን ስለተጠቀሙ፣ አሁን ቀይሁነዋል፡፡ እነሱን እንደገና ወደ ነበሩበት አረንጓዴ ለመመለስ፣ በዝርዝር 5.28 ላይ እንደሚታየው፣ ማዘዋወሪያወቹን መበየን ይኖርብናል፡፡ እዚህ ላይ፣ እያንዳንዱ ስዩም ማዘዋወሪያን (በምርጫ) ለማዘመን፣ የተለመደውን የ *_path ቅርጽን ለመጠቀም ይህንን አጋጣሚ እንደተጠቀምን አስተውሉ፡፡

ዝርዝር 5.28: 

የቛሚ ገጾች ፈተና ከአዲስ ስዩም ማዘዋወርያወች ጋር። አረንጓዴ test/controllers/quami_getss_controller_test.rb
require 'test_helper'

class QuamiGetssControllerTest < ActionDispatch::IntegrationTest

  test "መነሻ ገጽን ማግኘት አለበት" do
    get root_path
    assert_response :success
    assert_select "title", "የሩቢ ኦን ሬይልስ ስልጠና ማሳያ አፕልኬሽን"
  end

  test "እርዳታ ገጽን ማግኘት አለበት" do
    get erdata_path
    assert_response :success
    assert_select "title", "እርዳታ | የሩቢ ኦን ሬይልስ ስልጠና ማሳያ አፕልኬሽን"
  end

  test "ስለኛ ገጽን ማግኘት አለበት" do
    get silegna_path
    assert_response :success
    assert_select "title", "ስለኛ | የሩቢ ኦን ሬይልስ ስልጠና ማሳያ አፕልኬሽን"
  end

  test "የአግኙን ገጽን ማግኘት አለበት" do
    get agignun_path
    assert_response :success
    assert_select "title", "አግኙን | የሩቢ ኦን ሬይልስ ስልጠና ማሳያ አፕልኬሽን"
  end
end

መልመጃዎች

የሬይልስ ስልጠናን ለገዙ ሰወች በሙሉ የሁሉም የመልመጃ መልሶች እዚህ ላይ ይገኛሉ።

ከነባሪው ማዘዋወሪያ ሌላ አንድ ስዩም ማዘዋወሪያን ለመጠቀም የሚያገለግል እንደ፡ (as:) የተባለ አማራጪ አለ። በታዋቂው የፋር ሳይድ አስቂኝ የካርቱን ስዕሎች ታሪክ ውስጥ ትልቅ ሚና የሚጫወተውን የ‘ሃልፍ (helf) ቃልን ለመዘከር ያህል፣ የስለኛ ገጹ ማዘዋወሪያን ሃልፍ (helf) በሚለው ስም ለውጡ (ዝርዝር 5.29)።
አሁን ፈተናው ቀይመሆኑን አረጋግጡ፡፡ በዝርዝር 5.28 ውስጥ ያለውን የማዘዋወሪያ ስም በማዘመን ፈተናው አረንጓዴ እንዲሆን አድርጉ።
ከዚህ በፊት ያደረጋችኋቸውን ለውጦች በመቀልበስ ወደነበሩበት መልሱ፡፡

ዝርዝር 5.29: 

የእርዳታ (erdata) ማዘዋወሪያን ወደ ሃልፍ (helf) መለወጥ።
Rails.application.routes.draw do
  root 'quami_getss#menesha'
  get  '/erdata',  to: 'quami_getss#erdata', as: 'helf'
  get  '/silegna', to: 'quami_getss#silegna'
  get  '/agignun', to: 'quami_getss#agignun'
end

5.3.3 ስዩም ማዘዋወርያወችን መጠቀም

አሁን በዝርዝር 5.27 ውስጥ የተበየኑትን ስዩም ማዘዋወርያወች በጣቢያው ገጽታ ውስጥ ለመጠቀም የሚያስችል አንድ አቋም ላይ እንገኛለን፡፡ ይህም የ‘ዓገናኝ (link_to) ሥልቶች ሁለተኛ ነጋሪአሴትን፣ በቀላሉ በተገቢ ስዩም ማዘዋወርያወች መሙላትን ያሳትፋል፡፡ ለምሳሌ ይህንን:-

<%= link_to "ስለኛ", '#' %>

ወደዚህ

<%= link_to "ስለኛ", silegna_path %>

እና ሌሎቹንም በዚሁ መሰረት እንለውጣለን፡፡ _ራስጌ.ሃጽመቋ.ክሩ (_rasgie.html.erb) ከተባለው፣ የመነሻ እና የእርዳታ ገጾችን የሚያገናኙ ሁለት አገናኞች ከያዘው የራስጌ ከፊል እንጀምራለን (ዝርዝር 5.30)። እንዲሁም እግር መንገዳችንን አንድ የተለመደ የድር ደንብን በመከተል፣ አርማውን ከመነሻ ገጹ ጋርም እናገናኘዋለን።

ዝርዝር 5.30: 

የራስጌው ከፊል ከአገናኞች ጋር።  app/views/layouts/_rasgie.html.erb
<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "ማሳያ አፕልኬሽን", root_path, id: "አርማ" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "መነሻ",    root_path %></li>
        <li><%= link_to "እርዳታ",    erdata_path %></li>
        <li><%= link_to "ይግቡ", '#' %></li>
      </ul>
    </nav>
  </div>
</header>

እስከ ምዕራፍ 8 ድረስ “ለይግቡ” አገናኝ የሚሆን አንድ ስዩም ማዘዋወሪያ ስለማይኖረን፣ ለአሁኑ ይህንን '#' የቦታ-መያዣ ምልክት አድርገን እንተወዋለን።

የግርጌ ከፊሉ ማለት _ግርጌ.ሃጽመቋ.ክሩ (_grgie.html.erb)፣ የስለኛ እና የአግኙን ገጾችን የሚያገናኝ ሁለት አገናኞችን ይዟል (ዝርዝር 5.31)፡፡

ዝርዝር 5.31: 

የግርጌ ከፊሉ ከአገናኞች ጋር።  app/views/layouts/_grgie.html.erb
<footer class="footer">
  <small>
    <a href="https://www.railstutorial.org/">የሩቢ ኦን ሬይልስ ስልጠና</a>
    በ <a href="https://www.michaelhartl.com/">ማይክል ሃርተል</a>።
  </small>
  <nav>
    <ul>
      <li><%= link_to "ስለኛ", silegna_path %></li>
      <li><%= link_to "አግኙን", agignun_path %></li>
      <li><a href="https://news.railstutorial.org/">ዜና</a></li>
    </ul>
  </nav>
</footer>

በዚያ ገጽታችን በምዕራፍ 3 ውስጥ ለተፈጠሩት ቛሚ ገጾች በሙሉ አገናኞች ይኖሩታል ማለት ነው። ስለዚህ ለምሳሌ:- የ‘/ስለኛ (/silegna) አገናኝ ወደ ስለኛ ገጽ ይወስደናል ማለት ነው (ምስል 5.10)፡፡

የስለኛ ገጽ በ‘/ስለኛ (/silegna) ላይ።

መልመጃዎች

የሬይልስ ስልጠናን ለገዙ ሰወች በሙሉ የሁሉም የመልመጃ መልሶች እዚህ ላይ ይገኛሉ።

ገጽታው ላይ ያለው አገናኝ በዝርዝር 5.29 ላይ ያለውን የ‘ሃልፍ (helf) ማዘዋወሪያን ስራ ላይ ያውለው ዘንድ ገጽታውን አዘምኑ።
ከዚህ በፊት ያደረጋችኋቸውን ለውጦች በመቀልበስ ወደነበሩበት መልሱ፡፡

5.3.4 ገጽታ አገናኞችን መፈተን

አሁን ብዙውን የገጽታ አገናኞችን ሞልተናል፣ እናም በትክክል እየሰሩ መሆናቸውን ለማረጋገጥ እነሱን መፈተኑ አንድ ጥሩ ሃሳብ ነው። እኛ አንድ አሳሽን በመጠቀም ይህንን ማድረግ የምንችል ሲሆን፣ ይህንን እውን ለማድረግ ደግሞ በመጀመሪያ የስር ማዘዋወሪያውን መጎብኘት እና አገናኞቹ ላይ ጠቅ አድርጎ ከዚያም አገናኞቹ እንደተጠበቁት መስራታቸውን ማረጋገጥ ይኖርብናል ማለት ነው። ነገር ግን ይሄ የአሰራር ሂደት ባንዴ አድካሚ (አሰልች) ሊሆን ይችላል፡፡ በዚህ ፈንታ አንድ የውህደት ፈተናን (Integration Test) በመጠቀም አንድ ዓይነት የሆኑ ተከታታይ ሂደቶችን እናመሳስላለን፣ ይህም የአፕልኬሽናችንን ባህሪ ከጫፍ እስከ ጫፍ የሚፈትን አንድ ፈተናን እንድንጽፍ ያስችለናል። አንድ ጣብያ_ገጽታ (tabya_getsta) ብለን የምንጠራው አንድ የፈተና ዝግጁገጽታን በማመንጨት ስራውን መጀመር እንችላለን:-

$ rails generate integration_test tabya_getsta
      invoke  test_unit
      create    test/integration/tabya_getsta_test.rb

የሬይልስ ማመንጫ በራስሰር የፈተና ፋይሉ ስም ላይ _ፈተና (_test) የሚል ቅጥያ አያይዞ እንደሚጨምር ልብ በሉ፡፡

የገጽታ አገናኞቹን የመፈተን ዕቅዳችን የጣቢያችን የሃ.ጽ.መ.ቋ መዋቅርን መመርመርን ያሳትፋል:-

የስር ማዘዋወሪያውን ማግኘት (መነሻ ገጽ)።
ትክክለኛውን ዝግጁገጽታ መቅረቡን ማረጋገጥ።
ወደ መነሻ፣ እርዳታ፣ ስለኛ እና አግኙን ገጾች ጋር የሚያገናኙት አገናኞች ትክክለኛ መሆናቸውን መፈተሽ፡፡

ዝርዝር 5.32 የመነሻ ገጹ ትክክለኛውን ትይታ በመጠቀም መሰጠቱን ለማረጋገጥ ከ‘ዝግጁገጽታ_አረጋግጥ (assert_template) በመጀመር እነዚህን ሂደቶች ወደ ኮድ ለመተርጎም የሬይልስ የውህደት ፈተኖችን እንዴት መጠቀም እንደምንችል ያሳያል፡፡²⁰

ዝርዝር 5.32: 

በገጽታው ላይ ለሚገኙ አገናኞች የሚሆን አንድ ፈተና። አረንጓዴ test/integration/tabya_getsta_test.rb
require 'test_helper'

class TabyaGetstaTest < ActionDispatch::IntegrationTest

  test "ገጽታ አገናኞች" do
    get root_path
    assert_template 'quami_getss/menesha'
    assert_select "a[href=?]", root_path, count: 2
    assert_select "a[href=?]", erdata_path
    assert_select "a[href=?]", silegna_path
    assert_select "a[href=?]", agignun_path
  end
end

ዝርዝር 5.32 ከዚህ በፊት በዝርዝር 3.26 እና በዝርዝር 5.21 ውስጥ የታዩትን አንዳንድ እጅግ በጣም የላቁ የ‘መለያ_አረጋግጥ (assert_select) ዘዴ አማራጮችን ይጠቀማል፡፡ በዚህ ሁኔታ ላይ፣ አንድ የተለየ የዓ.አ.ሃ.አ አገናኝ ከተወሰነ የ‘ኤ (a) መለያ ስም ከ‘ሃማጣቀ (href) ባሕሪ ጋር በጥምረት መኖሩን ለመፈተን የሚያስችለውን አንድ አገባብ እንጠቀማለን፣ ልክ እንደዚህ

assert_select "a[href=?]", silegna_path

እዚህ ላይ ሬይልስ በጥያቄ ምልክቱ ምትክ (አስፈላጊ ከሆነ ማንኛውንም ልዩ ሆሄ በማምለጥ) የ‘ስለኛ_መንገድ (silegna_path) ዋጋን በራስሰር ያስገባዋል፤ በዚህም አንድ የዚህ አይነት ቅጽ ያለው:-

<a href="/silegna">...</a>

የሃ.ጽ.መ.ቋ መለያ መኖሩን ይፈትሻል፡፡ የስር መንገድ ማረጋገጫው ሁለት (2) አገናኞች በገጹ ውስጥ መኖራቸውን የሚያረጋግጥ መሆኑን አስተውሉ (አንዱ ለአርማው ሲሆን አንዱ ደግሞ ለዳሳሽ ምናሌ አባሉ ማለት ነው):-

assert_select "a[href=?]", root_path, count: 2

ይህ በዝርዝር 5.30 ላይ የተበየነው የመነሻ ገጽ ላይ ሁለቱም አገናኞች መኖራቸውን ያረጋግጣል፡፡

አንዳንድ ተጨማሪ የ‘መለያ_አረጋግጥ (assert_select) አጠቃቀሞች በሰንጠረዥ 5.2 ውስጥ ይታያሉ። መለያ_አረጋግጥ (assert_select) እንደ ልብ የሚገራ እና ኃይለኛ ዘዴ ቢሆንም (እዚህ ከሚታዩት በላይ የበለጠ ብዙ አማራጮች ቢኖሩትም)፣ ተሞክሮ እንደሚያሳየው፣ ከጊዜ በኋላ ብዙ የማይለወጡትን የሃ.ጽ.መ.ቋ አባሎችን (እንደ የጣቢያው ገጽታ አገናኞች ያሉትን) ብቻ በመፈተን አንድ ቀለል ያለ ዘዴን መጠቀሙ ብልህነት መሆኑን ነው።

ኮድ	ሃ.ጽ.መ.ቋን ተዛማጅ
`assert_select "div"`	`<div>አሉላ</div>`
`assert_select "div", "አሉላ"`	`<div>አሉላ</div>`
`assert_select "div.nav"`	`<div class="nav">foobar</div>`
`assert_select "div#ስራ"`	`<div id="ስራ">አሉላ</div>`
`assert_select "div[sim=አሉ]"`	`<div sim="አሉ">ሃይ</div>`
`assert_select "a[href=?]", '/', count: 1`	`<a href="/">አሉላ</a>`
`assert_select "a[href=?]", '/', text: "አሉላ"`	`<a href="/">አሉላ</a>`

የ‘መለያ_አረጋግጥ (assert_select) አንዳንድ ጥቅሞች።

በዝርዝር 5.32 ውስጥ ያለው አዲሱ ፈተና ማለፉን ለማረጋገጥ፣ የሚከተለውን ትእዛዝ በመጠቀም የውህደት ፈተናወችን ብቻ ማስኬድ እንችላለን:-

ዝርዝር 5.33: አረንጓዴ
$ rails test:integration

ሁሉም ነገር በጥሩ ሁኔታ ከሄደ፣ ሁሉም ፈተና አረንጓዴመሆኑን ለማረጋገጥ ሙሉውን የፈተና ስብስብ እንደሚከተለው አድርጋችሁ ማስኬድ አለባችሁ፡-

ዝርዝር 5.34: አረንጓዴ
$ rails test

በውህደት ፈተና ከታከሉ የገጽታው አገናኞች ጋር፣ አሁን እኛ የፈተና ስብስቡን በመጠቀም ምልሰትቶችን በፍጥነት ለመያዝ የሚያስችል አንድ ጥሩ ሁኔታ ላይ እንገኛለን፡፡

መልመጃዎች

የሬይልስ ስልጠናን ለገዙ ሰወች በሙሉ የሁሉም የመልመጃ መልሶች እዚህ ላይ ይገኛሉ።

በግርጌ ከፊሉ ውስጥ ያሉትን ሁለት ማዘዋወርያወች ማለት የ‘ስለኛ_መንገድ‘ን (silegna_path) እና የ‘አግኙን_መንገድ‘ን (agignun_path) በማገላበጥ ፈተናው ይህንን ስህተት እንደሚይዘው አረጋግጡ፡፡
በዝርዝር 5.35 ላይ እንደሚታየው፣ የአፕልኬሽኑን ረጅ፣ በፈተና ረጅ ውስጥ በማካተት በፈተናወቹ ውስጥ የ‘ሙሉ_አርዕስት (mulu_arest) ረጅውን መጠቀሙ አመች ነው። ከዚያም ልክ እንደ ዝርዝር 5.36 ውስጥ ያሉ ኮዶችን በመጠቀም ትክክለኛውን አርዕስት መፈተን እንችላለን። ይሁን እንጅ ይሄ አሰራር ወደማይሆን ስህተት የሚመራ ነው፣ ምክንያቱም ይህ ነው:- እንበል መሰረተ አርዕስቱን አንድ ፊደል ተሳስተን እንዲህ:- “የሩቢ ኦን ሬይልስ ስልጠና ማሳያ አፕልኬሽ” ብለን ጻፍነው እንበል፤ ይህ ስህተት በፈተና ስብስቡ አይያዘም። ይህንን ችግር ለማስተካከል ሙሉ_አርዕስት (mulu_arest) ረጅውን የሚፈትን አንድ ፈተና ጻፉ፡፡ ይህም እሱን ለመፈተን የሚያገለግል አንድ ፋይልን መፍጠር እና በዝርዝር 5.37 ላይ የሚገኘውን ይህን_ሙሉ የሚለውን ቃል በትክክለኛው ኮድ መሙላትን ያሳትፋል፡፡ (ዝርዝር 5.37 assert_equal <expected> ፣ <actual> የሚል ማጣርያን ይጠቀማል፣ ይህ ማለት የሚጠበቀው ውጤት ከትክክለኛው ዋጋ ጋር እንደሚዛመድ በእኩልነት == ማነጻጸርያ ስሌቱ ሲነጻጸር እኩል መሆኑን ያረጋግጣል ማለት ነው፡፡)

ዝርዝር 5.35: 

የአፕልኬሽኑን ረጅ በፈተናወች ውስጥ ማከል፡፡  test/test_helper.rb
ENV['RAILS_ENV'] ||= 'test'
.
.
.
class ActiveSupport::TestCase
  fixtures :all
  include ApplicationHelper
  .
  .
  .
end

ዝርዝር 5.36: 

በፈተና ውስጥ የ‘ሙሉ_አርዕስት (mulu_arest) ረጅን መጠቀም። አረንጓዴ test/integration/tabya_getsta_test.rb
require 'test_helper'

class TabyaGetstaTest < ActionDispatch::IntegrationTest

  test "የገጽታ አገናኞች" do
    get root_path
    assert_template 'quami_getss/menesha'
    assert_select "a[href=?]", root_path, count: 2
    assert_select "a[href=?]", erdata_path
    assert_select "a[href=?]", silegna_path
    assert_select "a[href=?]", agignun_path
    get agignun_path
    assert_select "title", mulu_arest("አግኙን")
  end
end

ዝርዝር 5.37: 

የ‘ሙሉ_አርዕስት (mulu_arest) ረጅን በቀጥታ መፈተን።  test/helpers/application_helper_test.rb
require 'test_helper'

class ApplicationHelperTest < ActionView::TestCase
  test "ሙሉ አርእስት ረጅ" do
    assert_equal mulu_arest,         ይህን_ሙሉ
    assert_equal mulu_arest("እርዳታ"), ይህን_ሙሉ
  end
end

5.4 የተጠቃሚ ምዝገባ፡- የመጀመሪያ ሂደት

በገጽታ እና በማዘዋወሪያው ላይ ለሰራነው ስራ ልክ እንደ አንድ የማእዘን ድንጋይ ይሆን ዘንድ፣ በዚህ ክፍል ለመመዝገቢያ ገጹ አንድ ማዘዋወሪያ እንሰራለን፣ ይህ ማለት እግረ መንገዳችንን አንድ ሁለተኛ መቆጣጠሪያን እንፈጥራለን ማለት ነው፡፡ ይህ ተጠቃሚዎች ጣቢያችን ላይ እንዲመዘገቡ ለማስቻል የመጀመሪያው አስፈላጊ ሂደት ሲሆን፣ ቀጣዩ ሂደት በምዕራፍ 6 ላይ ተጠቃሚዎችን መቀረጽ እና በምዕራፍ 7 ላይ ደግሞ ስራውን መጨረስ ይሆናል፡፡

5.4.1 የተጠቃሚዎች መቆጣጠሪያ

በክፍል 3.2 ላይ የመጀመሪያ መቆጣጠሪያችንን ማለት የቋሚ ገጽ መቆጣጠሪያን ፈጠርን፡፡ አሁን ደግሞ አንድ ሁለተኛ የተጠቃሚዎች መቆጣጠሪያ የመፍጠሪያ ጊዜ ነው፡፡ እንደበፊቱ የ‘አመንጪ (generate) ትእዛዝን በመጠቀም ፍላጎታችንን ብቻ የሚያሟላ ምጥንጥን ያለ መቆጣጠሪያ ማለትም ለአዲስ ተጠቃሚዎች የሚውል አንድ የተቆረጠ የምዝገባ ገጽን እንፈጥራለን። በሬይልስ ዘንድ የተወደደውን የው.ሁ.ማ መዋቅር ልምድን በመከተል አዲስ ተጠቃሚዎችን ለመፍጠር የ‘አዲስ (new) ዘዴን እንጠራ ዘንድ፣ ይህንን አዲስ (new) የተባለ ተለዋዋጪ በ‘አመንጪ (generate) ዘዴ ነጋሪአሴት ላይ በራስሰር በማሳለፍ ለዚሁ ስራ ልናዘጋጀው እንችላለን፡፡ የዚህ ዝግጅት ውጤትም በዝርዝር 5.38 ውስጥ ይታያል፡፡

ዝርዝር 5.38: 

አንድ የተጠቃሚዎች መቆጣጠሪያን (ከ‘አንድ አዲስ (new) ተግባር ጋር) ማመንጨት።
$ rails generate controller Teteqamis new
      create  app/controllers/teteqamis_controller.rb
       route  get 'teteqamis/new'
      invoke  erb
      create    app/views/teteqamis
      create    app/views/teteqamis/new.html.erb
      invoke  test_unit
      create    test/controllers/teteqamis_controller_test.rb
      invoke  helper
      create    app/helpers/teteqamis_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/teteqamis.scss

ዝርዝር 5.38 እንደተጠየቀው፣ አንድ የተጠቃሚዎች መቆጣጠሪያን ከአንድ የ‘አዲስ (new) ተግባር (ዝርዝር 5.39) እና ከአንድ የተቆረጠ የተጠቃሚ ትይታ (ዝርዝር 5.40) ጋር ፈጥሯል፡፡ እንዲሁም ለአዲሱ የተጠቃሚ ገጽ አንድ አነስተኛ ፈተናንም ፈጥሯል (ዝርዝር 5.41)፡፡

ዝርዝር 5.39: 

የበኩሩ የተጠቃሚዎች መቆጣጠሪያው ከአንድ አዲስ (new) ተግባር ጋር።  app/controllers/teteqamis_controller.rb
class TeteqamisController < ApplicationController

  def new
  end
end

ዝርዝር 5.40: 

የበኩሩ የ‘አዲስ (new) ትይታ ለተጠቃሚወች።  app/views/teteqamis/new.html.erb
<h1>Teteqamis#new</h1>
<p>Find me in app/views/teteqamis/new.html.erb</p>

ዝርዝር 5.41: 

ለአዲስ ተጠቃሚ ገጽ የመነጨ ፈተና። አረንጓዴ test/controllers/teteqamis_controller_test.rb
require 'test_helper'

class TeteqamisControllerTest < ActionDispatch::IntegrationTest

  test "should get new" do
    get teteqamis_new_url
    assert_response :success
  end
end

በዚህ ጊዜ ፈተኖቹ አረንጓዴመሆን አለባቸው:-

ዝርዝር 5.42: አረንጓዴ
$ rails test

መልመጃዎች

የሬይልስ ስልጠናን ለገዙ ሰወች በሙሉ የሁሉም የመልመጃ መልሶች እዚህ ላይ ይገኛሉ።

በሰንጠረዥ 5.1 ላይ የተሰጠውን ስዩም ማዘዋወሪያ ዝርዝር 5.41 ይጠቀምበት ዘንድ፣ የ‘ተጠቃሚወች_አዲስ_ዓአሃአ‘ን (teteqamis_new_url) ወደ ተመዝገብ_መንገድ (temezgeb_path) ለውጡ፡፡
በላይኛው ጥያቄ መሰረት የቀየራችሁት ማዘዋወሪያ ገና አልተፈጠረም፣ ስለሆነም ፈተናው አሁን ቀይመሆኑን አረጋግጡ (በክፍል 5.4.2 ላይ ፈተናውን ወደነበረበት አረንጓዴ እንመልሰዋለን)። (ይህ ከፈተና-መሬ ብልጸጋ የ ቀይእና የ አረንጓዴ ፍሰቱ ጋር ልምድ እንዲኖራችሁ ለማድረግ ታስቦ የቀረበ ነው (ፈ.መ.ብ ሳጥን 3.3)።)

5.4.2 የምዝገባ ዓ.አ.ሃ.አ

በክፍል 5.4.1 ላይ ባለው ኮድ ውስጥ እኛ ቀድሞውኑ በ‘/ተጠቃሚወች/አዲስ (/teteqamis/new) ላይ ለአዲስ ተጠቃሚወች የሚሰራ አንድ ገጽ አለን፣ ነገር ግን ሰንጠረዥ 5.1 ላይ ካስታወሳችሁ ዓ.አ.ሃ.አው በዛ ፋንታ /ተመዝገብ (/temezgeb) እንዲሆን ፈልገን ነበር። በዝርዝር 5.43 ላይ እንደሚታየው፣ የዝርዝር 5.27 ምሳሌዎችን እንከተላለን፣ እናም ለምዝገባው ዓ.አ.ሃ.አ አንድ የ‘/ተመዝገብ አግኝ (get '/temezgeb') ደንብን እናክላለን፡፡

ዝርዝር 5.43: 

ለምዝገባ ገጽ አንድ ማዘዋወሪያ ማከል። ቀይ config/routes.rb
Rails.application.routes.draw do
  root 'quami_getss#menesha'
  get  '/erdata',     to: 'quami_getss#erdata'
  get  '/silegna',    to: 'quami_getss#silegna'
  get  '/agignun',    to: 'quami_getss#agignun'
  get  '/temezgeb',   to: 'teteqamis#new'
end

በዝርዝር 5.43 ውስጥ ያለውን አንድ ተስማሚ ማዘዋወርያ በመጠቀም፣ በዝርዝር 5.38 ላይ እንደሚታየው፣ በዝርዝር 5.44 ውስጥ የመነጨውን ፈተና በአዲስ የምዝገባ ማዘዋወሪያ ማዘመን ይኖርብናል።

ዝርዝር 5.44: 

የምዝገባ ማዘዋወርያውን ለመጠቀም የተጠቃሚዎች መቆጣጠሪያ ፈተናን ማዘመን። አረንጓዴ test/controllers/teteqamis_controller_test.rb
require 'test_helper'

class TeteqamisControllerTest < ActionDispatch::IntegrationTest

  test "should get new" do
    get temezgeb_path
    assert_response :success
  end
end

ቀጥሎም፣ ትክክለኛውን የአዝራር አገናኝ የመነሻ ገጹ ላይ ለማከል፣ አዲስ የተበየነውን ስዩም ማዘዋወሪያ እንጠቀማለን፡፡ እንደ ሌሎቹ ማዘዋወርያወች ሁሉ የ‘አግኝ ተመዝገብም (get 'temezgeb') በዝርዝር 5.45 ውስጥ በራስሰር የምንጠቀምበትን ማለት ተመዝገብ_መንገድ (temezgeb_path) የተባለ አንድ ስዩም ማዘዋወሪያን ይሰጠናል፡፡ ለምዝገባ ገጹ የሚሆን አንድ ፈተናን የመጨመሩ ጉዳይ ለናንተ መልመጃ ይሆን ዘንድ ተትቷል (ክፍል 5.3.2.1)፡፡

ዝርዝር 5.45: 

አዝራሩን ከምዝገባ ገጹ ጋር ማገናኘት።  app/views/quami_getss/menesha.html.erb
<div class="center jumbotron">
  <h1>እንኳን ወደ ማሳያ አፕልኬሽን በደህና መጡ!</h1>

  <h2>
    ይህ <a href="https://www.railstutorial.org/">
    የሩቢ ኦን ሬይልስ ስልጠና ትምህርት</a>
    ማሳያ ለተባለው አፕልኬሽን፡ የመነሻ ገጽ ነው፡፡
  </h2>

  <%= link_to "ይመዝገቡ", temezgeb_path, class: "btn btn-lg btn-primary" %>
</div>

<%= link_to image_tag("rails.svg", alt: "የሬይልስ አርማ", width: "200"),
                      "https://rubyonrails.org/" %>

በመጨረሻም አንድ ብጁ ቁራጪ (ቦታ-ያዥ) ትይታን ለምዝገባ ገጹ እናክላለን (ዝርዝር 5.46)፡፡

ዝርዝር 5.46: 

በኩሩ (ቁራጩ) የምዝገባ ገጽ  app/views/teteqamis/new.html.erb
<% provide(:title, 'ይመዝገቡ') %>
<h1>ይመዝገቡ</h1>
<p>ይህ ለአዲስ ተጠቃሚዎች የምዝገባ ገጽ ይሆናል።</p>

በዚያ፣ አንድ የመግቢያ ማዘዋወሪያ እስክንጨምርበት ድረስ (ምዕራፍ 8)፣ ከአገናኞች እና ከስዩም ማዘዋወርያወች ጋር ያለንን ነገር እዚህ ላይ ጨርሰናል፡፡ የአዲስ ምዝገባ ገጽ (በ‘/ተመዘገብ (/temezgeb) ዓ.አ.ሃ.አ ላይ ይገኛል) በምስል 5.11 ላይ ይታያል።

የአዲስ ምዝገባ ገጽ በ‘ተመዘገብ (/temezgeb) ዓ.አ.ሃ.አ ላይ፡፡

መልመጃዎች

የሬይልስ ስልጠናን ለገዙ ሰወች በሙሉ የሁሉም የመልመጃ መልሶች እዚህ ላይ ይገኛሉ።

በክፍል 5.4.1.1 ውስጥ የተሰጣችሁን መልመጃ ካልሰራችሁ፣ አሁን ዝርዝር 5.41 ውስጥ ያለው ፈተና የተሰየመውን የ‘ተመዝገብ_መንገድ (temezgeb_path) ማዘዋወሪያን እንዲጠቀም አድርጉ፡፡ ዝርዝር 5.43 ላይ በተበየነው ማዘዋወሪያ ምክንያት፣ ይህ ፈተና ከመጀመሪያውም አረንጓዴመሆን ይኖርበታል።
የላይኛው መልመጃ ትክክለኛውን ነገር እየፈተነ መሆኑን በደንብ ለማረጋገጥ ተመዝገብ (temezgeb) የተባለው ማዘዋወሪያ ላይ የአስተያየት ምልክት በማድረግ ፈተናው ቀይእንዲሆን አድርጉ እና ከዚያ አስተያየቱን በማስወገድ ደግሞ ፈተናው ወደነበረበት አረንጓዴእንዲመለስ አድርጉ።
በዝርዝር 5.32 ላይ የሚገኘው የውህደት ፈተና ላይ የ‘አግኝ (get) ዘዴን በመጠቀም የምዝገባ ገጹን ጎብኝቶ በገጹ ላይ ይመዝገቡ የሚል አርዕስት መኖሩን የሚያረጋግጥ አንድ ፈተናን አክሉ፡፡ ጠቃሚ ምክር:- የ‘ሙሉ_አርዕስት (mulu_arest) ረጅን ልክ በዝርዝር 5.36 ውስጥ እንደተጠቀምንበት አድርጋችሁ በመጠቀም ይህንን ጥያቄ መመለስ ትችላላችሁ።

5.5 ማጠቃለያ

በዚህ ምዕራፍ ውስጥ የአፕልኬሽናችንን ገጽታ ቀጥቅጠን ቅርጽ አስይዘነዋል፣ ማዘዋወሪያወቹን ደግሞ ኣኳኩለናችዋል። የተቀረው የመጽሐፉ ክፍል ስለ ማሳያ አፕልኬሽኑ የበለጠ መረጃ ለመስጠት የተመደበ ነው፤ በመጀመሪያ ለድር-ጣቢያው መመዝገብ፣ ከድር-ጣቢያው መውጣት እና ወደ ድር-ጣቢያው መግባት የሚችሉ ተጠቃሚዎችን በማከል፤ ከዚያ የተጠቃሚ አጪርጽሑፎችን በማከል፤ እና በመጨረሻም፣ ሌሎች ተጠቃሚዎችን የመከተል ችሎታን ማከል ይሆናል።

በዚህ ጊዜ፣ ጊትን እየተጠቀማችሁ ከሆነ፣ ለውጦቻችሁን ወደ ዋና ቅርንጫፉ ማዋሃድ አለባችሁ:-

$ git add -A
$ git commit -m "ገጽታውን እና ማዘዋወሪያወችን ማጠናቀቅ"
$ git checkout main
$ git merge ገጽታውን-መሙላት

ከዚያ ወደ ጊትሃብ ግፉት (በመጀመሪያ ለጥንቃቄ ያህል የፈተና ስብስቡን አስኪዱት):-

$ rails test
$ git push

በመጨረሻም ወደ ሃሩኩ አሰማሩት:-

$ git push heroku

የማሰማራቱ ውጤት በምርት አገልጋይ ላይ የሚሰራ አንድ የማሳያ አፕልኬሽን መሆን አለበት (ምስል 5.12)፡፡

የማሳያ አፕልኬሽኑ በምርት ላይ።

5.5.1 በዚህ ምዕራፍ ውስጥ የተማርናቸው ነገሮች:-

ሃ.ጽ.መ.ቋ5ን በመጠቀም የአንድ ጣቢያ ገጽታን አርማ፣ ራስጌ፣ ግርጌ እና ዋና የአካል ይዘትን መበየን እንደምንችል፣
የሬይልስ ከፊሎች ምቹ ለሆነ አሰራር፣ በአንድ የተለየ ፋይል ውስጥ መንቀሻን (የገጽታ ኮዶችን) ለማስቀመጥ እንደሚያገለግሉ፣
ወ.ሉ.ቅ በወ.ሉ.ቅ ክፍሎች እና መታወቂያወች ላይ በመመርኮዝ የጣቢያውን ገጽታ ማስቄጥ እንደሚያስችለን፣
የቡትስትራፕ መዋቅር አንድ በጥሩ ሁኔታ የተነደፈ ጣቢያን በፍጥነት ለመስራት ሁሉን ነገር ቀላል እንደሚያደርግ፣
የወ.ሉ.ቅ ውጤቱን በብቃት ወደ ምርት በማሸግ ወቅት አ.ቆ.ሉ.ቅ እና የንብረት ቧንቧመስመሩ በወ.ሉ.ቅ ውስጥ የኮድ ድግግሞሽን ማስወገድ እንደሚያስችሉን፣
ሬይልስ ብጁ የማዘዋወሪያ ደንቦችን እንድንበይን እንደሚፈቅድ፣ ስለሆነም ስዩም ማዘዋወርያወችን እንደሚሰጠን እና
በመጨረሻም፣ የውህደት ፈተናዎች ከገጽ ወደ ገጽ አሳሽን ጠቅ በማድረግ በብቃት እንደሚያስመስሉ ተምረናል።

1. የማሳያ አፕልኬሽኑን ወደ ቡትስትራፕ የወ.ሉ.ቅ በመቀየር ላይ ላበረከቱት መልካም ስራ፣ ክቡር አንባቢ ኮልም ቱይተን ከልብ አመሰግናለሁ።

2. ምንም እንኳን ቡትስትራፕ አሁን በቅርቡ የወጡ አዳዲስ ስሪት ቢኖሩትም፣ ይህ ስልጠና ቀድሞ ከታተሙት የመጽሐፉ እትሞች ጋር በአቀማመጡ እና በሃ.ጽ.መ.ቋ መዋቅሩ ተመሳሳይ እንዲሆን ለማድረግ ከቡትስትራፕ 3 ጋር ደረጃውን የጠበቀ ነው። ከወቅታዊው የቡትስትራፕ ስሪት ጋርም በጣም ተመሳሳይ ስለሆነ፣ እዚህ የምትማሯቸው ችሎታዎች በሙሉ ለመጪው ሞያችሁ የሚያገለግሉ እንደሚሆኑ አምናለሁ።

3. በሩቢ ኦን ሬይልስ ስልጠና ውስጥ ያሉ ስእላዊ መግለጫወች በሙሉ የተሰሩት እጅግ በጣም ጥሩ በሆነው ማኪንግበርድ በተባለው የመስመር ላይ የስእላዊ መግለጫ አፕልኬሽን ነው፡፡

4. በዚህ አውድ ውስጥ፣ መደገፊያ (Shim) እና ሰንጢ (Shiv) የተባሉት ቃላቶችን በተለዋዋጪነት መጠቀም ይቻላል፣ የመጀመርያው የተለመደ አጠራር ነው፣ እሱም በእንግሊዝኛ “አንድ ነገርን ለማስተካከል የሚሸጎጥ ነገር” የሚለውን ትርጉም ሲይዝ፤ የሁለተኛው ደግሞ በዋናው የኮዱ ፈጠሪ ማለት በዮርድ ቪሸር የተሰጠውን “እንደ አንድ መሳሪያ የሚያገለግል ቢላዋ ወይም ምላጪ” የሚለውን ትርጉም ይዟል፡፡

5. እነዚህ ክፍሎች ፍጹም ከሩቢ ክፍሎች ጋር አይገናኙም።

6. “ID” “መታወቂያ identification” ለሚለው ትርጉም የተሰጠ አጪር የመጠሪያ ስም ሲሆን፤ ሲነበብ ደግሞ ልክ እንደ ነጠላ ፊደል “አይ ዲ” ተብሎ ይነበባል፡፡ “id” የሚለውን የአጻጻፍ ስልት ለአንድ የፍራውዲያን የስነ-ልቦና ጥናት የአጻጻፍ ስልት እንዲሆን በመተው፣ በእንግሊዝኛ የተለመደው የአጻጻፍ ስልት ሁሉንም በዓብይ ፊደል እንዲህ አድርጎ:- “ID” መጻፍ ነው፡፡ ይህ በእዲህ እንዳለ፣ ሃ.ጽ.መ.ቋ በአብዛኛው ጊዜ በንዑስ ፊደል ስለሚጻፍ በዚህ አውድ ውስጥ “id” ተብሎ መጻፉ ተገቢ ይሆናል፡፡

7. ከዚህ በፊት የድር መመርመሪያ በጪራሽ ተጠቅማችሁ የማታውቁ ከሆነ፣ ስለዚህ ጉዳይ በይበልጥ ለመረዳት ጎግል ላይ የአሳሻችሁን ስም በማስገባት መጎገል ትችላላችሁ፡፡

8. ያለው የቦታክፍተት ሊለያይ ይችላል፣ ሃ.ጽ.መ.ቋ ለክፍትቦታ ደንታ ስለለለው፣ ቢለያይም ምንም ለውጥ አያመጣም (ለዛም ነው በክፍል 3.4.1 ላይ እንደዛ ያደረግነው)።

9. ስለ ከርል (curl) ትእዛዝ ተጨማሪ መረጃ ለማግኘት ከፈለጋችሁ በማዘዥያ መስመር ላይ መሰረታዊ እውቀትን ለማግኘት የሚያስፈልገውን ትምህርት ተማር ላይ ተመልከቱ።

10. የ‘ምስል (img) መለያውን ስታዩ እንዳጋጣሚ በዚህ:- <img>...</img> ዓይነት መለያ እንደመዝጋት ፈንታ በእንደዚህ:- <img ... /> ዓይነት መለያ እንደሚዘጋ አስተውላችሁ ሊሆን ይችላል፡፡ በዚህ ዓይነት መልኩ መለያቸውን የሚዘጉ መለያወች ራስ-ዘጌ (Self-closing) መለያወች በመባል ይታወቃሉ።

11. ምስሉ በ 2016-01-09 ከ https://www.flickr.com/photos/deborah_s_perspective/14144861329 የተወሰደ ነው፡፡ በዴቦራ የ 2009 የቅጂ መብት © እና የጋራ የፈጠራ አጠቃላይ ዋለዮ 2.0 ፈቃድ መሰረት ስእሉ ላይ ለውጥ አልተደረገም።

12. እንደ ሁልጊዜው፣ እዚህ ላይ የተዘረዘሩትን የእንቁ ስሪት ቁጥሮችን ከመጠቀም ይልቅ፣ በ gemfiles-6th-ed.railstutorial.org ላይ የተዘረዘሩትን የእንቁ ስሪት ቁጥሮችን መጠቀም ይኖርባችኋል።

13. የነዚህ ነገሮች አሰራርን ለመረዳት ያስቸግራል፣ ይገርማችኋል እኔ ራሴ ከ በቡትስትራፕ-ሳስ የአንቡቡኝ ፋይል ላይ ያገኘኋቸውን መመሪያዎች ብቻ ተከትየ ነው የምሰራው።

14. ብዙ የሬይልስ አበልጻጊወች የተለያየ ማሳያን የሚጋሩ የከፊል ፋይሎችን ለማስቀመጥ አንድ የ‘ጋራ (yegara) የተባለ ማውጫ ይጠቀማሉ። (ምዕራፍ 7 ላይ የ‘ጋራ (yegara) የተባለውን ማውጫ እንፈጥራለን።) እኔ ግን በ‘ገጽታወች (layouts) ማውጫ ላይ እንደምናየው፣ የከፊል ፋይሎቹን በቀጥታ ባሉበት ማውጫ ላይ በመፍጠር የጋራ (yegara) ማውጫውን በብዙ ማሳያወች ላይ ጠቃሚ ለሆኑ የአገልግሎት ሰጪ ከፊል ፋይሎችን ለማስቀመጥ እመርጠዋለሁ። ይህ ለኔ ምክንያታዊ የሆነ ልዩነት መስሎ ይሰማኛል፣ ይሁን እንጅ ሁሉንም በ‘የጋራ (yegara) ማውጫ ውስጥ ማስቀመጡም በጥሩ ሁኔታ ይሰራል፡፡

15. ሁለቱንም ማለትም ግርጌ (footer) የተባለውን መለያ እና .ግርጌ (.footer) የተባለውን ክፍል ስለተጠቀምን ልትገረሙ ትችሉ ይሆናል፡፡ ለዚህ መልስ የሚሆነውም፣ የመጀመሪያው መለያ ለኛ ማለት ለምናነበው ሰወች አንድ ግልጽ ትርጉም እንዲኖረው ለማድረግ ሲሆን፤ ሁለተኛው ክፍል ደግሞ በቡትስትፕ ጥቅም ላይ የሚውል ክፍል ነው የሚል መልስ ይሆናል። በ‘ግርጌ (footer) መለያ ምትክ አንድ የ‘ክፍሊት (div) መለያ ብንጠቀምም እንዲሁ ሊሰራ ይችላል፡፡

16. የዚህ ክፍል የመጀመሪያ አወቃቀር ሲመሰረት ማይክል ኢራሱመስ:- “በ 5 ደቂቃ ውስጥ የሬይልስ 3 የንብረት ቧንቧመስመርን መረዳት” ብሎ ከጻፈው እጅግ በጣም ጥሩ መጣጥፍ ላይ በመመርኮዝ ነበር።

17. ማለት በአንድ በተሰጠ የፕሮግራም ቋንቋ ውስጥ ያሉትን ሁሉንም ገጸባህሪያት የያዘ እና እንዲሁም ሌሎች ገጸባህሪያትን ለማካተት የተስፋፋ ወይም የተሻሻለ የፕሮግራም ቋንቋ ማለት ነው፡፡

18. አ.ቆ.ሉ.ቅ እንዲሁ አንድ አዲስ ቋንቋን የሚበይን አንድ ተለዋጪ አገባብን ይደግፋል፣ ይህም ያልተንዛዛ እና ትንሽ ጥቅል ቅንፎች ያሉት ይሁን እንጂ ቀድሞ ለተጀመረ ፕሮጀክት ግን አመቺ አይደለም፣ በተጨማሪም ቀድሞውኑ የወ.ሉ.ቅ ዕውቀት ላላቸው ሰዎች እሱን መማሩ ትንሽ ሊያዳግታቸው ይችል ይሆናል፡፡

19. ጠንካራ-ኮድ (hard-code) (እንዲሁም hard-coding ወይም hardcoding በመባልም ይታወቃል) ማለት መረጃን በአንድ የፕሮግራም ምንጪ ኮድ ወይም በሌላ ሊተገበር/ሊፈጸም በሚችል ቁስ ውስጥ በማስገባት ሶፍትዌርን የማበልጸግ አሰራር ማለት ነው።

20. አንዳንድ አበልጻጊወች አንድ ነጠላ ፈተና ብዙ ማረጋገጫዎችን ሊይዝ አይገባም ይላሉ፡፡ እነሱ ያሉትን አሰራር ተመልክቸ የተወሳሰበ ሆኖ አግኝቼዋለሁ፤ በተለይ ከእያንዳንዱ ፈተና በፊት የሚያስፈልጉ ተደጋጋሚ የፈተና ዝግጅቶች የሚከናወኑ ከሆኑ ደግሞ ይህ ዓይነት አሰራርን መከተሉ ከሚገባው በላይ መድከም ይሆናል፡፡ በተጨማሪም አንድ በደንብ የተጻፈ ፈተና ከፈተናው ጋር ጎን ለጎን የሚሄድ ግልጽ ታሪክን ሲነግር፣ አንድ በተናጠል የተጻፈ ፈተና ግን የፈተናውን ታሪክ የተቆራረጠ ያደርገዋል። በሩቢ የፈተና መዋቅር ማለት በሚኒቴስት ላይ በመተማመን እሱ ማንኛውንም ያልተሳካ ማረጋገጫ የሚገኝበትን ትክክለኛ መስመር/ቦታ ሊነግረኝ ስለሚችል፤ በአንድ ነጠላ ፈተና ውስጥ በርካታ ማረጋገጫዎችን በማካተቱ ላይ ጠንካራ አቛም አለኝ።

ማንበቡን ይቀጥሉ