Membuat Portal Pendidikan

                                                      Assalammu'alaikum wr. wb. 

A. Pendahuluan

Portal web adalah situs web yang menyediakan kemampuan tertentu yang dibuat sedemikian rupa mencoba menuruti selera para pengunjungnya. Kemampuan portal yang lebih spesifik adalah penyediaan kandungan informasi yang dapat diakses menggunakan beragam perangkat, misalnya komputer pribadi, komputer jinjing (notebook), PDA (Personal Digital Assistant), atau bahkan telepon genggam.

B.Latar Belakang

   Portal ini didirikan sebuah perusahaan industri yang berisi tentang Pendidikan di dunia IT. Dan dengan adanya saya membuat portal ini untuk mempermudah Siswa dalam mencari informasi.

C.Maksud dan Tujuan

  Untuk mempermudah  untuk mencari informasi.

D. Alat dan Bahan

   -Pc/Laptop
   -Sublime text
   -Web server

E. Tahap Pelaksanaan

   1. Buka sublime text, lalu ketikan text seperti berikut ini.

        -Buat file yang berexstensi .html

 

      -kemudian untuk mempercantik portal kita buat  file dengan ekstensi .css

     -Untuk ngasih gambar di portal seperti background dan foto-foto lainnya, 

        bisa anda  ganti sesuai keinginan anda. 

     -Tetapi harus ber exstensi JPG.PNG atau JEPG.

     -Dan foto sama scriptnya harus di taruh dalam satu folder.

   

    

       -Jangan lupa untuk di save. Setelah itu jalankan di browser den lihat hasilnya.

          jika berhasil maka di browser akan muncul seperti ini:

                                   

 

 F.Kesimpulan

     Jadi, portal disini sebagai sistem informasi suatu perusahaan yang di gunakan untuk memudahkan orang untuk mencari dan mengerti tentang perusahan tersebut.

G. Referensi

w3schools.com

H.Penutup

A. Pendahuluan

Portal web adalah situs web yang menyediakan kemampuan tertentu yang dibuat sedemikian rupa mencoba menuruti selera para pengunjungnya. Kemampuan portal yang lebih spesifik adalah penyediaan kandungan informasi yang dapat diakses menggunakan beragam perangkat, misalnya komputer pribadi, komputer jinjing (notebook), PDA (Personal Digital Assistant), atau bahkan telepon genggam.

B.Latar Belakang

   Portal ini didirikan sebuah perusahaan industri yang berisi tentang Pendidikan di dunia IT. Dan dengan adanya saya membuat portal ini untuk mempermudah Siswa dalam mencari informasi.

C.Maksud dan Tujuan

  Untuk mempermudah  untuk mencari informasi.

D. Alat dan Bahan

   -Pc/Laptop
   -Sublime text
   -Web server

E. Tahap Pelaksanaan

   1. Buka sublime text, lalu ketikan text seperti berikut ini.

        -Buat file yang berexstensi .html

 

      -kemudian untuk mempercantik portal kita buat  file dengan ekstensi .css

     -Untuk ngasih gambar di portal seperti background dan foto-foto lainnya, 

        bisa anda  ganti sesuai keinginan anda. 

     -Tetapi harus ber exstensi JPG.PNG atau JEPG.

     -Dan foto sama scriptnya harus di taruh dalam satu folder.

   

    

       -Jangan lupa untuk di save. Setelah itu jalankan di browser den lihat hasilnya.

          jika berhasil maka di browser akan muncul seperti ini:

                                   

 

 F.Kesimpulan

     Jadi, portal disini sebagai sistem informasi suatu perusahaan yang di gunakan untuk memudahkan orang untuk mencari dan mengerti tentang perusahan tersebut.

G. Referensi

w3schools.com

   Sekian yang bisa saya sharing kan, semoga bermanfaat untuk kita semua. 

Terima Kasih

                           Wassalammu'alaikum wr. wb.

Read More

PENGENALAN DASAR GRID BOOTSTRAP

                                            Assalamu'alaikum wr.wb

                         

A. Pendahuluan
Hayy Apa kabar?? bertemu lagi dengan blog saya kali ini saya akan berbagi tentang grid di bootstrap
  BOOTSTRAP adalah Aplikasi sumber terbuka yang berupa framework atau kerangka kerja untuk membangun website dinamis dengan menggunakan bahasa script CSS. BOOTSTRAP memudahkan developer dan designer untuk membuat sebuah aplikasi web menjadi cepat dan mudah dibandingkan dengan membuatnya dari awal.

B.Latar Belakang
       Belajar mehami bootstrap
C.Maksud dan Tujuan
        Memahami grid di bootstrap
D.Alat dan Bahan
-Laptop/Pc
 -Koneksi internet
E.Durasi Waktu
 -

F.PEMBAHASAN
  Sistem Grid Bootstrap                                                                                                           Sistem grid Bootstrap memungkinkan hingga 12 kolom di seluruh halaman.Jika Anda tidak ingin menggunakan semua 12 kolom secara terpisah, Anda dapat mengelompokkan kolom bersama-sama untuk membuat kolom yang lebih luas:
   

Kelas kisi-kisi

   Sistem grid Bootstrap memiliki empat kelas:

• xs (untuk ponsel - layar kurang dari 768px lebar)
• sm (untuk layar tablet sama dengan atau lebih besar dari 768px)
• md (untuk laptop kecil - layar berukuran sama dengan atau lebih besar dari lebar 992 piksel)
• lg (untuk laptop dan desktop - layar sama dengan atau lebih besar dari lebar 1200px)

     Kelas di atas dapat dikombinasikan untuk menciptakan layout yang lebih dinamis dan      fleksibel.

  G.Hasil Yang Didapat  
 Memahami grid di bootstrap 

  H. Referensi  
 https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp 

I.PENUTUP

   Sekian mengenai apa yang saya sharingkan pada kesempatan kali ini...

Semogaa Bermanfaat....

                                Wassalammualaikum Wr. Wb.

Read More

Navbar Pada BOOTSTRAP

                                Assalammu'alaikum wr. wb.

A. Pendahuluan

Navigasi bar merupakan elemen penting dalam sebuah website atau aplikasi web. Kali ini kita akan membuat navigasi web menggunakan framework Bootstrap.

B.Latar Belakang

Agar lebih paham lagi tentang semua yang ada di dalam bootstrap.  Terutama dalam pembuatan navbar.

C.Maksud dan Tujuan

Lebih paham akan syntax dalam membuat navbar.

D. Alat dan Bahan

• PC/Laptop
• Web Browser
• Text Editor

E. Tahap Pelaksanaan

1. Pastikan anda sudah mempunyai file bootstrap.

2. Buka text editor anda, lalu ketikan script seperti dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Kelas X<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Kelas X-X</a></li>
          <li><a href="#">Kelas X-XI</a></li>
          <li><a href="#">Kelas X-XII</a></li>
        </ul>
      </li>
      <li><a href="#">Kelas XI</a></li>
      <li><a href="#">Kelas XII</a></li>
    </ul>
  </div>
</nav>
<div class="container">
  <h3>Navbar With Dropdown</h3>
  <p>This example adds a dropdown menu for the "Kelas X" button in the navigation bar.</p>
</div>
</body>
</html>

3. Setelah itu jalankan pada browser anda.

   

4. Jika berhasil maka akan akan muncul seperti ini.

F. Kesimpulan

    Bootstrap ini cara kerjanya yaitu hanya memanggil yang diperlukan saja. Dan bootstrap pemakaiannya sangat mudah, karena tinggal manggil saja.

G. Referensi

1. http://www.proweb.co.id/articles/web_application/navigasi_bootstrap.html 
2. https://www.w3schools.com/bootstrap/bootstrap_navbar.asp 

H.Penutup

   Sekian yang dapat saya sampaikan. kurang lebihnya mohon ma'af semoga dapat bermanfa'at.

                            Wassalammu'alaikum wr. wb

Read More

INSTALL BOOTSTRAPE 4

Assalammu'alaikum wr. wb.

 

A. Pendahuluan

  Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan   tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website.  

B.Latar Belakang

  Bootstrap digunakan untuk membangun desain web secara responsif. Artinya,   tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device.

C.Maksud dan Tujuan

  Membuat tampilan menjadi front-end menjadi lebih mudah dan sangat cepat. 

D.Alat dan Bahan

   -Laptop/Pc

   -Koneksi internet

E.Jangka Waktu Pelaksanaan

   5 menit

F. Tahap Pelaksanaan

   1. Download file Bootstrap terlebih dahulu

   2. Jika sudah,taruh file bootsrtap di var/www/html dan lalu extract here.

   3. Dan Bootstrap siap digunakan.

G. Referensi

http://dul.web.id/bootstrap/4/tuts-tips/belajar-bootstrap-untuk-pemula.php

Sekian dari saya terimakasih.

Wasssalammu'alaikum wr. wb.

Read More

PENGENALAN BOOTSTRAP

                               Assalammu'alaikum wr. wb. 

                                   


A. Pendahuluan
Kali ini saya akan berbagi tentang pengenalan bootstrap. Langsung saja ke pembahasannya.

1. Pengertian
BOOTSTRAP adalah Aplikasi sumber terbuka yang berupa framework atau kerangka kerja untuk membangun website dinamis dengan menggunakan bahasa script CSS. BOOTSTRAP memudahkan developer dan designer untuk membuat sebuah aplikasi web menjadi cepat dan mudah dibandingkan dengan membuatnya dari awal.

2. Latar Belakang
Bootstrap itu dapat diartikan sebagai kumpulan dari fungsi-fungsi/prosedur-prosedur dan class-class untuk tujuan tertentu yang sudah siap digunakan sehingga bisa lebih mempermudah dan mempercepat pekerjaan seorang programer, tanpa harus membuat fungsi atau class dari awal. Oleh karena itu, saya ini belajar bootsrap.

3. Maksud dan Tujuan

• Mempercepat dan mempermudah pembangunan sebuah aplikasi web.
• Relatif memudahkan dalam proses maintenance karena sudah ada pola tertentu dalam sebuah framework (dengan syarat programmer mengikuti pola standar yang ada)
• Umumnya framework menyediakan fasilitas-fasilitas yang umum dipakai sehingga kita tidak perlu membangun dari awal.
• Lebih bebas dalam pengembangan jika dibandingkan CMS

 B. Alat dan Bahan
 -Laptop
  -Web Browser
 -Sublime text
C. Jangka Waktu Pelaksanaan
   20 menit
D. Pembahasan
Apa Itu Bootstrap?
Bootstrap adalah front-end framework yang Cantik, bagus , mudah digunakan serta cocok untuk semua jenis device (Handphone, tablet PC, Laptop, PC). Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.
Dengan Menggunakan Bootstrap, Pengerjaan sebuah project dalam sebuah team menjadi lebih mudah. Mengapa demikian? Karena dengan Bootstrap, penamaan class sudah dibakukan. Seorang desainer hanya tinggal menggunakan nama class tersebut di setiap TAG HTML yang ia gunakan.

Untuk Apa itu bootstrap?

Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.

Cara menggunakan Bootstrap

Jika kita telah mempunyai Web HTML dengan coding seperti dibawah ini:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
</body>
</html>

Untuk merubah agar bisa menggunakan, bootstrap, Anda tinggal menyisipkan di bagian head beberapa baris untuk loading style dan javascript bootstrap sebagai berikut (lihat tambahan di baris 8 dan 9):

<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

E. Hasil yang Diharapkan
  Bisa lebih paham apa itu bootstrap dan cara kerjanya.
F. Kesimpulan
  Jadi, bootsrap itu merupakan library framework css. Dan bootsrap merupakan salah satu framework dari html,css an javascript yang populer dikalangan developer.
G. Referensi  
http://www.malasngoding.com https://id.wikipedia.org/wiki/PHP_Bootstrap
 
Sekian dan terimakasih.

                             Wassalammu'alaikum wr. wb.

Read More