KATA PENGANTAR 

Puji syukur kami ucapkan atas Rahmat, Hidayah, dan Inayah dari Allah
SWT, sehina kami !isa melakukan akti"itas pada mestinya dan kemudahan
dalam menjalani kehidupan ini# Shala$at !eserta salam sem%a terlimpah atas
 penhulu manusia !aik yan dahulu maupun sekaran, yaitu &ainda 'uhammad
SAW# San re"%lusi%ner (mat Islam yan !eitu iih memperjuankan islam
sehina menjadi aama !erkedudukan tini di !umi Allah ini#

Alhamdulill
Alhamdulillah,
ah, saya telah !erhasil
!erhasil mem!uat
mem!uat makalah untuk memenuhi
tuas yan di!erikan %leh )%sen selaku pem!im!in dalam mata perkuliahan aar 
mahasis$a mampu terampil dan kreati* serta mempunyai ide dan aasan yan
cemerlan sehina pr%ses pem!elajaran le!ih e*ekti* dan e*isien#

Harapan
Harapan kami sem%a
sem%a makalah
makalah ini memenu
memenuhi
hi kriteri
kriteriaa yan
yan ideal
ideal dan
k%nkrit serta dapat !erman*aat dalam pelajaran Pem%raman Internet# Terima
kasih kami ucapkan kepada I!u P%p%n )auni#selaku d%sen pem!im!in dalam
 pem!elajaran Pemm%raman Internet dan terima kasih jua kepada semua pihak 
yan telah mem!antu kami dalam menyelesaikan makalah ini#

Akhir kata, hasil makalah ini masih sanat jauh dari kesempurnaan# Tidak 
ada yan
yan sempur
sempurnana karena
karena kesempu
kesempurna
rnaan
an hanyal
hanyalah
ah milik
milik Allah
Allah SWT#
SWT# )emi
)emi
 per!aikan dan penem!anan makalah ini ke depan, kami sanat menharapkan
kritikan dan saran demi kesempurnaan makalah ini#

&andunr, ++ April -+.

Penulis
)A/TAR ISI

KATA PENGANTAR #############################################
####################################################################
##############################################
#######################+
+

)A/TAR ISI ##############################################

#####################################################################
##############################################
###################################
############

&A& I ##############################################
######################################################################
###############################################
##############################################
#######################0
0

PEN)AH(1(AN #############################################
####################################################################
##############################################
###########################0
####0

A# 1ATAR &E1AKANG ############################################

###################################################################
###########################0
####0
&# &ATASAN 'ASA1AH ############################################
###################################################################
###########################0
####0

&A& II ###########################################
##################################################################
##############################################
###########################################2
####################2

PE'&AHASAN ###########################################
##################################################################
##############################################
###############################2
########2

A# Penertian &%%tstrap ############################################

###################################################################
###########################2
####2
&# /unsi !%%tstrap ############################################
###################################################################
###########################2
####2
3# 3ara mem!uat &%%tstrap ############################################
###################################################################
###########################4
####4

)# 3ara 'em!uat Ta!el )enan &%%tstrap ####################################################5

 1ankah6lankah mem!uat ta!el denan !%%tstrap ###################################5
• Ta!le Style 
• Ta!le Style 0
• Ta!le Style 2
E# Te
Template
mplate &l%er &isa )i!uat )enan &%%tstrap ####################################+4
/# 3ara 'em!uat 'enu Na"iasi )enan &%%tstrap ###################################+.
 1ankah61ankah 'em!uat 'enu Na"iasi )enan &%%tstrap ######
• /i7ed Na"iati%n 8n T%p
• )ark Na"iati%n 9n%n /i7ed:
• 1iht Na"iati%n 9n%n /i7ed:
G# 3ara 'em!uat Alerts Perinatan atau Pesan )enan &%%tstrap ##############+
 1ankah 'em!uat Alerts atau Pesan )enan &%%tstrap ###################+
• Green Alerts Successs
• &lue Alerts In*%
• ;ell%$
;e ll%$ Alerts
Alert s Warnin
H# Kekuranan dan kele!ihan &%%tstrap #######################################################0

&A& III ###########################################

##################################################################
##############################################
#####################################2
##############2

PEN(T(P ##############################################
#####################################################################
##############################################
#############################2
######2

)A/TAR P(STAKA ###########################################

##################################################################
#########################################4
##################4
 &A& I
PEN)AH(1(AN
A# 1ATAR &E1AKANG

Pada saat ini dunia industri dan !isnis memerlukan in*%rmasi yan tepat, cepat
dan rele"an# (ntuk mendapatkan in*%rmasi yan diininkan tentunya harus
menunakan sistem in*%rmasi#

Sistem in*%rmasi dalam suatu %ranisasi dapat dikatakan se!aai suatu

sistem yan menyediakan in*%rmasi !ai semua tinkatan dalam %ranisasi
terse!ut kapan saja diperlukan# Sistem ini menyimpan, menam!il, menu!ah,
men%lah dan menk%munikasikan in*%rmasi yan diterima denan
menunakan sistem in*%rmasi atau peralatan sistem lainnya#

&# &ATASAN 'ASA1AH

)ari latar !elakan masalah di atas, maka muncul tuas penulis untuk 
menjelaskan le!ih jauh tentan manajemen umum#

+# Apa penertian !%%tstrap <

# Apa keunaan !%%tstrap <

0# &aaimana !elajar !%%tstrap untuk pemula <

2## Apa saja kele!ihan dan kekuranan !%%tstrap <

&A& II
 PE'&AHASAN
A# Penertian &%%tstrap

&%%tstrap adalah plat*%rm !aru yan dikem!ankan tim t$itter# Pertama

kali muncul pada ajan hackweek  dan kini sudah mulai penyempurnaan# Plat*%rm
ini hanya menunakan sedikit c%din 3SS dan =a"aScript namun tetap !isa
mem!uat $e!site yan p%$er*ull menikuti perkem!anan !r%$ser# We!site
yan menunakan bootstrap akan menjadi $e!site yan *leksi!el, nyaman dan
tentu saja cepat#
&%%tstrap jua memudahkan penaturan $e!site !ai mereka yan kuran
mahir c%din atau tidak punya $aktu !anyak# Sekumpulan ja"ascript dan 3SS
yan di!utuhkan untuk !anyak sekali $idet ada dalam satu *ile yan terus di
update %leh penem!an# Pemilik $e!site tidak akan lai disi!ukkan denan
 penaturan css atau ja"ascript !erle!ihan# 'ereka hanya perlu menentukan adet
atau elemen apa yan inin ditampilkan dalam !entuk HT'1 standart !%%tstrap
yan sanat simple#
'isalkan dulu untuk menam!ahkan menu!ar di !l%sp%t, maka Anda
 perlu menyisipkan *ile 3SS, HT'1 !ahkan =a"aScript untuk e**ect tertentu#
Kemudian ketika Anda inin menam!ahkan dr%pd%$n menu, maka per $idet,
 palin tidak Anda !utuh menam!ahkan 3SS dan HT'1 lai# &elum lai jika
inin le!ih menarik akan di!utuhkan ja"ascript tam!ahan# &eitu seterusnya
setiap penam!ahan $idet selalu di!utuhkan !anyak k%de# Tapi setelah instalasi
 !%%tstrap, Anda hanya perlu menam!ahkan k%de HT'1 nya saja#
Tapi Penunaan !%%tstrap kadan mem!uat kita jadi kuran kreati*,
3%din yan sudah di !uatkan %leh penem!an mem!uat desain $e! kita
ter!atas# Se!enarnya kita masih !isa tam!ahkan 3SS manual pada elemen6elemen
 !%%tstrap untuk mempercantiknya, tapi jelas ini mem!uat $e! kita nanun#
'enam!ahkan 3SS manual sama saja kem!ali ke cara lama#
=adi, pilihan Anda apakah akan menikuti perkem!anan jaman !ersama
 !%%tstrap, editin dan kel%la $e!site secara instan# Atau le!ih suka oprek  template
sendiri !erkutat denan k%de 3SS yan Anda susun6susun sendiri#

&# /unsi !%%tstrap

&%%tstrap merupakan *rame$%rk untuk mem!anun desain $e! secara

resp%nsi*# Artinya, tampilan $e! yan di!uat %leh !%%tstrap akan menyesuaikan
ukuran layar dari !r%$ser yan kita unakan !aik di deskt%p, ta!let ataupun
m%!ile de"ice# /itur ini !isa diakti*kan ataupun din%n6akti*kan sesuai denan
keininan kita sendiri# Sehina, kita !isa mem!uat $e! untuk tampilan deskt%p
saja dan apa!ila dirender %leh m%!ile !r%$ser maka tampilan dari $e! yan kita
  !uat tidak !isa !eradaptasi sesuai layar# )enan !%%tstrap kita jua !isa
mem!anun $e! dinamis ataupun statis#
3# 3ara mem!uat &%%tstrap

(ntuk memulai !elajar &%%tstrap, Anda harus mempersiapkan !ahan dan t%%ls
 pendukun untuk melenkapi keiatan !elajar terse!ut# &aiklah lansun saja#

Persiapan>

Anda Harus memiliki *ile distri!usi &%%tstrap

(ntuk menunakan !%%tstrap, terle!ih dahulu Anda harus mend%$nl%ad

res%urce *ile atau *ile distri!usi yan disediakan %leh !%%tstrap di situs resminya
et!%%tstrap#c%m# Pada halaman terse!ut, terdapat t%m!%l )%$nl%ad &%%tstrap
se!aaimana terlihat pada am!ar diatas, lansun saja? klik t%m!%l terse!ut#
Kemudian pilih lai )%$nl%ad &%%tstrap

Setelah did%$nl%ad, kemudian e7tract menunakan pr%ram seperti @ip

9Gratis:  atau winRAR (shareware)# Se!etulnya, Anda jua !isa mem!uka *ile
terse!ut denan aplikasi !a$aan $ind%$s denan cara mem!uka *ile terse!ut,
kemudian c%py seluruh *ile dan paste6kan ke *%lder lain#

)%$nl%ad jBuery 1i!rary (ntuk &ekerja 8**line

(ntuk !isa menaplikasikan !%%tstrap c%mp%nent seperti m%dal dial%,

na"iati%n !ar dan lainnya yan mem!utuhkan !%%strap =S, &%%tstrap =S jua
mem!utuhkan jBuery li!rary aar !isa !erjalan n%rmal# &%%tstrap tidak 
menyertakan jBuery di dalam *ile d%$nl%ad6nya untuk itu, kita harus
mend%$nl%adnya secara terpisah# Hal ini dilakukan aar kita !isa !ekerja dan
menunakannya secara %**line 9tanpa k%neksi internet:# Silahkan d%$nl%ad
 jBuery li!rary denan menuju situs resmi  jBuery )%$nl%ad, pilih jBuery +#7
kemudian, d%$nl%ad denan menklik link )%$nl%ad the c%mpressed, pr%ducti%n
 jBuery +#++#+

Anda harus memiliki c%de edit%r#

3%de edit%r pentin sekali untuk memanipulasi *ile yan akan kita kem!ankan
khususnya *ile HT'1, 3SS dan =a"ascript se!aaimana *ile terse!ut terdapat
 pada !%%tstrap# =anan pernah menunakan W%rd pr%cess%r 9'icr%s%*t W%rd,
dll: ataupun n%tepad untuk memanipulasi *ile6*ile terse!ut# Karena aplikasi
terse!ut tidak c%c%k dan terdapat !anyak kekuranan yan akan mem!inunkan
kita sendiri nantinya#

Ada !anyak sekali c%de edit%r yan terse!ar di internet yan dapat kita unakan
 !aik yan ratis maupun yan !er!ayar# Se!aai pemula, munkin kita !isa
memulai denan menunakan N%tepadCC# Aplikasi ini ratis dan !anyak 
diunakan %leh de"el%per# )%$nl%ad aplikasi N%tepadCC
 th/irst Nameth

th1ast Nameth

  th(sernameth

  tr

  thead

  t!%dy

  tr

  td+td

  td'arktd

  td8tt%td

  tdmd%td

  tr

  tr

  tdtd

  td=ac%!td

  tdTh%rnt%ntd

  td*attd

  tr

  tr

  td0td

  td1arrytd

tdthe &irdtd

  tdt$ittertd

  tr

  t!%dy

  ta!le

  di"

Q Ta!le Style 0
  /irst Name 1ast Name (sername

'ark 8tt% md%

+
'ark 8tt% T$&%%tstrap

 =ac%! Th%rnt%n *at

0 1arry the &ird t$itter  

di" classDc%l6md6.D

ta!le classDta!le ta!le6!%rderedD

  thead

  tr

  thth

th/irst Nameth

th1ast Nameth

  th(sernameth

  tr

  thead

  t!%dy

  tr

td r%$spanDD+td

  td'arktd

  td8tt%td

  tdmd%td

  tr

  tr

  td'arktd

  td8tt%td

  tdT$&%%tstraptd

  tr

  tr
  tdtd

  td=ac%!td

  tdTh%rnt%ntd

  td*attd

  tr

  tr

  td0td

td c%lspanDD1arry the &irdtd

  tdt$ittertd

  tr

  t!%dy

  ta!le

  di"
Q Ta!le Style 2

 /irst Name 1ast Name (sername

+ 'ark 8tt% md%

 =ac%! Th%rnt%n *at

0 1arry the &ird t$itter  

di" classDc%l6md6.D

ta!le classDta!le ta!le6c%ndensedD

  thead

  tr

  thth

th/irst Nameth

th1ast Nameth

  th(sernameth

  tr
)ari uraian di atas penulis !erharap, pem!aca dapat memahami tentan &%%tstrap#
Penulis menyadari !ah$a dalam pem!uatan makalah ini masih !anyak kesalahan
dan kekuranan, !aik dari sei penulisan maupun dari sei pemaparan# 'aka dari
itu pemakalah menerima dan menharapkan kritik dan saran dari pem!aca yan
si*atnya mem!anun, aar makalah ini dapat menjadi le!ih sempurna dan menjadi
rujukan !ai pem!aca nantinya#

)A/TAR P(STAKA

http>itcentrestain!atusankar#!l%sp%t#c%m-+2++$e!site6atau6!l%6lansun6
nacirr#html

http>themasd%y%k#c%m-+0-5penertian6apa6itu6!%%tstrap#html
http>$$$#ee#$e!#id-+0+-!%%tstrap6itu6apa6sih#html<m+