Belajar Node.js episode lanjutan Part 5

hellooo world 😀

bismillah dulu ahh sekalian doain emak nih yang lagi dirawat.
bismillahirrahmanirrahim, ya allah semoga penyakit ibu saya cepat diangkat dari tubuhnya dan beliau segera diberikan kesembuhan Amin.

Ya kemarin dapet kabar buruk, emak dirawat, lumayan parah juga soalnya apalagi kalo n’ga dirawat kata Dokter. Kayaknya emang penyakitnya udah lama ada tapi masih ditahan-tahan aja sama emak 😦 alhasil dibiarkan begitu aja dan makin parah jadinya, hmmm.. mungkin karna anak-anaknya juga nih yang kurang peka (maapin kami ya mak). Kata Dokternya emak kena maag kronis, lambungnya udah luka, makanya kemarin itu emak mual dan muntah keluar darah(astagfirullah). Cepet sembuh ya emak, kami semua butuh emak 😦 .

yo_express11

Masih ingatkan pembahasan kita yang kemarin?? kemarin itu udah sampe mana ya, kita udah nyoba bootstrap apa belum yaa? kalo belum kayaknya ga enak nih. Yaudah kali ini kita nyoba bootstrap aja yuk dan berarti kita masih di sisi view nya aja dulu ya.

hehehe…daripada nyoba bootstrap doang mending sekalian nyoba template bootstrap yang udah jadi aja deh, soalnya saya gajago design 😀 ya apa boleh buat kita nyontek punya orang aja yuk. Siapkan dulu template yang mau dipake, kalo belum ada gugel aja ya bro :p , berhubung saya udah punya alias udah pernah donlot templatenya dan sebenernya udah jadi juga sih :p hahahaa. Kurang lebih tampilan web node.js kita akan kek gini nih gaess.

yo_express12

Buat yang mau cek hasil akhir tutorial ini bisa dilihat di https://hrydi.herokuapp.com.
Gimana?? makin tertarik n’ga buat lanjut baca tutorial acak-acakan kek gini hehehee.

Kalo mau templatenya bisa diunduh disini : https://www.dropbox.com/s/87udn6nnwgrf0ur/dashgumfree.zip?dl=0
Extrak template itu, copy semua file pendukung yang ada di folder assets atau copy semua folder assets itu ke folder public di web kita(bisa lihat gambar paling atas). Selanjutnya kita mulai edit file-file agar template tadi bisa dipake, file yang akan kita edit : index, layout(.jade).

1. Layout.jade

doctype html
html(lang='en')
  head
    meta(charset='UTF-8')
    meta(name='viewport', content='width=device-width')
    title= title
    block css
      //link(rel='stylesheet', href='/css/style.css')
      //link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css')
      link(rel='stylesheet', href='/temp/font-awesome/css/font-awesome.css')
      link(rel='stylesheet', href='/temp/js/gritter/css/jquery.gritter.css')
      link(rel='stylesheet', href='/temp/css/bootstrap.css')
      link(rel='stylesheet', href='/temp/css/style.css')
      link(rel='stylesheet', href='/temp/css/style-responsive.css')
    block js
      //script(src='https://code.jquery.com/jquery-2.1.3.js')
      //script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js')
      script(src='/temp/js/jquery.js')
      script(src='/temp/js/jquery-1.8.3.min.js')
      script(src='/temp/js/bootstrap.min.js')
      script(src='/temp/js/jquery.dcjqaccordion.2.7.js')
      script(src='/temp/js/jquery.scrollTo.min.js')
      script(src='/temp/js/jquery.nicescroll.js')
      script(src='/temp/js/common-scripts.js')
      script(src='/temp/js/gritter/js/jquery.gritter.js')
      script(src='/temp/js/gritter-conf.js')
      script(src='/js/custom.js')
      script(src='http://localhost:35729/livereload.js')
  body
    block content

    block foot
      footer.site-footer
        .text-center
          | ©2015 - hrydi 
          small (Original Template By.Alvarez.is)
          a.go-top(href='#')
            i.fa.fa-angle-up

Sesuaikan source file template tadi dengan yang kita panggil di script ini.

2. Index.jade

extends layout

block content

  section#container
    header.header.black-bg
      .sidebar-toggle-box
        .fa.fa-bars.tooltips(data-placement="right", data-original-title="Toggle Navigation")
      a.logo(href='/')
        b hrydi* 
      small noDe
    section#main-content
      section.wrapper
        .row.mt
          .col-lg-12.col-md-12.col-sm-12
            .showback
              h4
                i.fa.fa-angle-right
                | Basic Progress Bars
              .progress.progress-striped.active
                .progress-bar(role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%")
                  span.sr-only 45% Complete

          .col-lg-4.col-md-4.col-sm-12
            .showback
              h4
                i.fa.fa-angle-right
                | Basic Progress Bars
              .progress.progress-striped.active
                .progress-bar(role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%")
                  span.sr-only 45% Complete

          .col-lg-8.col-md-8.col-sm-12
            .showback
              h4
                i.fa.fa-angle-right
                | Data Artikel

Perlu diperhatikan agar tidak langsung copy-paste kode-kode diatas okehh. Soalnya kemungkinan bakal error yaa syukur deh kalo n’ga error mah :p .
Barisan kode-kode diatas ga perlu saya jelasin yaa, karna yaa emang ga ngerti(udah gitu aja) hehee.
Sedikit tambahan kalo mau generate .html ke .jade itu kita bisa pake online tools di : http://html2jade.aaron-powell.com/

Sekian tutorial kita kali ini, dan sekali lagi semoga emak cepet sembuh ya allah, Amin.

Advertisements
This entry was posted in node.js and tagged , , , . Bookmark the permalink.

One Response to Belajar Node.js episode lanjutan Part 5

  1. Pingback: Belajar Node.js episode lanjutan Part 6 | just a fool

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s