Jumat, 31 Maret 2017

Pengertian JavaScript

on Maret 31, 2017 Tidak ada komentar
 

JavaScript merupakan bahasa pemrograman yang berguna untuk membuat interaksi pada Website. JavaScript ini sudah menjadi salah satu bahasa pemrograman yang wajib dan harus di kuasai untuk membangun website yang moderen. JavaScript ini sudah menjadi kebutuan dan bahasa pemrograman yang harus dikuasai oleh seorang Web Developer, Apabila kita yang akan mengkhususkan diri di bagian web design, ada beberapa bahasa pemrograman yang wajib dikuasai oleh seorang Web Developer adalah sebagai berikut :
  • HTML
Dalam membangun sebuah Website HTML berperan sebagai pembuat bentuk dari Website tersebut.
  •  CSS
Dalam membangun sebuah Website CSS memiliki peran sebagai design bentuk, warna, dan sebagainya.
  • JavaScript
Dalam membangun sebuah Website JavaScript berguna untuk membuat fitur-fitur serta efek yang membuat halaman website lebih interaktif.

Latar Belakang

Pada Perkembangan Dunia Website sekarang ini JavaScript sudah menjadi Bahasa Pemrograman yang sangat di butuhkan dan banyak sekali website-website yang menggunakan JavaScript untuk membuat Modal Alert, Pemberitahuan, From Validation, Efek, Ajax, Game, DLL.

Contoh Website yang menggunakan JavaScript agar Website mereka lebih interaktif atau lebih hidup adalah Facebook, Twitter, Google dan website lainnya. Salah satu penggunaan JavaScript pada Facebook yaitu, Facebook memiliki fitur kotak chating yang dapat kita tutup dan buka. Form chat dapat terbuka dan tertutup karena menggunakan bantuan javascript. Kemudian jika sobat membeli tiket pesawat melalui Website penyedia tiket pesawat. setelah sobat memilih kota sekarang dan memilih kota tujuan maka akan muncul maskapai pesawat tanpa me-reload halaman tersebut. Itulah beberapa contoh penggunaan JavaScript

Apa Saja Yang Dapat Dilakukan Dengan JavaScript

Untuk lebih menegaskan pemahaman tentang Pengertian javaScript dan Kegunaan JavaScript dan berikut ini akan saya jelaskan aka-apa saja yang dapat di lakukan oleh javaScript :
  • JavaScript dapat mengganti atribut HTML.
  • JavaScrit dapat mengganti Style CSS.
  • JavaScript dapat membuat Fotm Validasi.

Kesimpulan

Dan dengan adanya JavaScript kita dapat membuat tampilan website kita lebih hidup walaupun Bahasa JavaScript agak susah dipahami tetapi Bahasa Pemrograman ini memiliki peran yang besar untuk membuat sebuah Website iteraktif.

Referensi : malasngoding.com




Kamis, 30 Maret 2017

Penempatan Javascript Dan Jquery Pada Bootstrap

on Maret 30, 2017 Tidak ada komentar



Penetapan Javascript Bootstrap Dan Jquery dan hal tersebut terkadang dianggap tidak penting tetapi yang harus di ketahui oleh kita adalah hal ini sangat penting karena jika kita salah penetapan hal ini dapat memberikan efek dalam konten pun akan gagal. Dan ini contoh yang menggunakan Bootstrap Js dan selain itu kita harus mengetahui satu hal selain Bootstrap.js kita jika perlu menambahkan Jquery.
  • JS Affix
  • JS Allert
  • JS Button
  • JS Carousell
  • JS Collapse
  • JS Dropdown
  • JS Modal
  • JS Popover
  • JS Scrollspy
  • JS Tab
  • JS Tolltip
Di bawah ini adalah cotoh penempatan dan penulisan javascript


Di atas itu adalah cara penuisannya
Keterangannya adalah

  • Jquery.min.js itu ditulis terlebih dahulu sebelum penulisan Bootstrap.js nya.
  • Pemanggilan melalui <script>
  •  Pemanggilan di dalam tag head
 Referensi: http://agunglaksononew.blogspot.co.id/2017/03/penetapan-javascript-bootstrap-dan.html
 

Rabu, 29 Maret 2017

Membangun Website Sekolah Dengan Wordpress Di Linux Mint 17.3

on Maret 29, 2017 Tidak ada komentar

A. LATAR BELAKANG 

   wordpress.org merupakan wilayah pengembang (developer). Di alamat ini, seseorang dapat mengunduh (download) aplikasi beserta seluruh berkas CMS WordPress. Selanjutnya, CMS ini dapat diubah ulang selama seseorang menguasai PHP, CSS dan skrip lain yang menyertainya. WordPress dengan bahasa indonesia ada berkat kerja para kontributor di indonesia yang dipimpin oleh Huda Toriq, seorang Mahasiswa Kedokteran dari Universitas Diponegoro (UNDIP) Semarang.

B. PENGERTIAN
 
    WordPress adalah sebuah aplikasi sumber terbuka (open source) yang sangat populer digunakan sebagai mesin blog (blog engine). WordPress dibangun dengan bahasa pemrograman PHP dan basis data (database) MySQL. PHP dan MySQL, keduanya merupakan perangkat lunak sumber terbuka (open source software). Selain sebagai blog, WordPress juga mulai digunakan sebagai sebuah CMS (Content Management System) karena kemampuannya untuk dimodifikasi dan disesuaikan dengan kebutuhan penggunanya. WordPress adalah penerus resmi dari b2/cafelog yang dikembangkan oleh Michel ValdrighiNama WordPress diusulkan oleh Christine Selleck, teman Matt Mullenweg. WordPress saat ini menjadi platform content management system (CMS) bagi beberapa situs web ternama seperti CNN, Reuters, The New York Times, TechCrunch, dan lainnya.
 
C. PEMBAHASAN

1. Pertama kita harus mendownload folder wordpress terlebih dahulu silahkan klik  DISINI  
2. Setelah kita mendownload folder tersebut kiat exctrack terlebih dahulu
    a. Kita buka terminal terlebih dahulu.


   b. Setelah Itu kita masuk ke super user terlebih dahulu dengan memasukkan perintah #sudo su

   
   c. Kita unzip folder yang sudah kita donwload tadi dengan memasukkan perintah. #unzip wordpress-4.7.3.zip

  
    d. setelah itu pindah kan folder yang sudah di unzip ke direktory var/www/html.
degan memasukkan perintah #mv wordpress /var/www/html/


   e. Setelah selesai memindahkan folder tersebut kita berpindah directory ke var/www/html/ dengan memasukkan perintah #cd /var/www/html/.

   
   f. Setelah kita berpindah directory kita change owner tersebut dengan memasukkan perintah #chown -R www-data:www:data wordpress


    g. Setelah itu kita langsung cek pada browser kita dengan langsung ketikkan #localhost/wordpress maka akan muncul tampilan sebagai berikut

  lalu kita klik lest go

   h. Setelah itu kita akan mengisi berbagai macam form isian pada bagian ini kita terlebih dahulu membuat databasenya

  
dan baru kita isi form isian tersebut

  dan setelah diisi kita bisa langsung klik submit

   i. dan tahap selanjutnya kita langsung bisa klik run install

 
    j. dan tahap selanjutnya kita isi beberapa form lagi

 dan setelah selesai kita klik install wordpress

  k. dan kita masukkan user dan password yang sudah tadi di isi pada tahap sebelumnya.


   l. Setelah kita login kita akan langsung masuk dashboard di halaman admin kita


   m. dan kita langsung cek hasilnya pada browser dengan mengetikkan #localhost/wordpress dan hasilnya akan seperti berikut ini.


D. KESIMPULAN

     Kita bisa membangun web sekolah kita meski kita tidak terlalu mahir dalam ilmu progremer kita bisa bisa membangunnya dengan wordpress.

E. REFERENSI
  • http://wordpress.org/

Senin, 27 Maret 2017

Membuat Template Sederhana Dengan Bootstrap

on Maret 27, 2017 Tidak ada komentar


Template blog atau Template website itu adalah desain-desain halaman blog ataupun halaman website beserta seluruh komponennya baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web. Template bisa juga kita artikan sebagai tema blog atau tampilan blog. Seperti yang kita lihat saat ini di blog belajar blog dan seo, bahwa terlihat tatanan gambar atau tampilan serta tulisan di layar monitor anda, itulah yang dinamakan template.

Contoh 

<!DOCTYPE html>
<html>
<head>
<title>Belajar bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
  <!-- membuat menu navigasi -->
  <nav class="navbar navbar-default">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="http://amirulmuttaqin24.blogspot.co.id">Blogger</a>
      </div>
     
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="#">Profil <span class="sr-only">(current)</span></a></li>
          <li><a href="#">Menu</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tutorial <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">HTML</a></li>
              <li><a href="#">CSS</a></li>
              <li><a href="#">Javascript</a></li>            
              <li><a href="#">JQuery</a></li>            
              <li><a href="#">CodeIgniter</a></li>
            </ul>
          </li>
        </ul>
       
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#" data-toggle="modal" data-target="#modal-login">Login</a></li>        
          <li><button type="button" class="btn btn-primary navbar-btn" data-toggle="modal" data-target="#modal-daftar">Daftar</button></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav> 

  <!-- Modal -->
  <div class="modal fade" id="modal-login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal Login</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label>Email</label>
              <input type="text" class="form-control">
            </div>
            <div class="form-group">
              <label>Password</label>
              <input type="password" class="form-control">
            </div>           
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
          <button type="button" class="btn btn-primary">Login</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="modal-daftar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal Daftar</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label>Nama</label>
              <input type="text" class="form-control">
            </div>
            <div class="form-group">
              <label>Email</label>
              <input type="text" class="form-control">
            </div>
            <div class="form-group">
              <label>Password</label>
              <input type="password" class="form-control">
            </div>           
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
          <button type="button" class="btn btn-primary">Daftar</button>
        </div>
      </div>
    </div>
  </div>
  <!-- akhir modal -->

  <!-- akhir menu navigasi -->

  <div class="container">    
    <!-- membuat jumbotron -->
    <div class="jumbotron">
      <center>     
        <h2>Tampilan templete sederhana dengan bootstrap</h2>
        <p>klik tombol di bawah maka akan langsung menuju blog </p><br/><br/>
        <p><a class="btn btn-primary btn-lg" href="http://amirulmuttaqin24.blogspot.co.id/" role="button">Visite Blog</a></p>
      </center>
    </div>
    <!-- akhir jumbotron -->
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="html.png" alt="..." style="width: 50%; height: 50%;">
        <div class="caption">
          <h3>Tutorial HTML</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris</p>
          <p><a href="http://amirulmuttaqin24.blogspot.co.id/" class="btn btn-primary" role="button">Lihat</a></p>
        </div>
      </div>
    </div>

    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="css.png" alt="..." style="width: 50%; height: 50%;">
        <div class="caption">
          <h3>Tutorial CSS</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris</p>
          <p><a href="http://amirulmuttaqin24.blogspot.co.id/" class="btn btn-primary" role="button">Lihat</a></p>
        </div>
      </div>
    </div>

    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="bss.png" alt="..." style="width: 50%; height: 50%;">
        <div class="caption">
          <h3>Tutorial Bootstrap</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris</p>
          <p><a href="http://amirulmuttaqin24.blogspot.co.id/" class="btn btn-primary" role="button">Lihat</a></p>
        </div>
      </div>
    </div>

    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="php.png" alt="..." style="width: 50%; height: 50%;">
        <div class="caption">
          <h3>Tutorial PHP</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris</p>
          <p><a href="http://amirulmuttaqin24.blogspot.co.id/" class="btn btn-primary" role="button">Lihat</a></p>
        </div>
      </div>
    </div>

  </div>
  <br/>
 
 
  <div class="clearfix"></div>
   
  <nav class="navbar navbar-default" style="bottom: 0;margin: 0">
    <div class="container">
      <center>
       
      <ul class="nav navbar-nav">
        <li><a href="#">Copyright @ 2017 Amirul Muttaqin. All rights reserved.</a></li>      
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Develop Amirul Muttaqin</a></li>                 
      </ul>
      </center>  
    </div>
  </nav>
 
</body>
</html>

Di bawah ini adalah hasil dari script di atas


jika kita beralih ka mode handphone maka otomatis tampilannya akan seprti di bawah ini

 


jika kita klik daftar maka akan tampil percakapan yang menggunakan modal

 

Di bawah ini adalah Contoh halaman single

<!DOCTYPE html>
<html>
<head>
    <title>bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- membuat menu navigasi -->
    <nav class="navbar navbar-default">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="amirulmuttaqin24.blogspot.co.id/">Blogger</a>
            </div>
           
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">Profil <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Menu</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tutorial <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">HTML</a></li>
                            <li><a href="#">CSS</a></li>
                            <li><a href="#">Javascript</a></li>                           
                            <li><a href="#">JQuery</a></li>                           
                            <li><a href="#">CodeIgniter</a></li>
                        </ul>
                    </li>
                </ul>
               
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#" data-toggle="modal" data-target="#modal-login">Login</a></li>                   
                    <li><button type="button" class="btn btn-primary navbar-btn" data-toggle="modal" data-target="#modal-daftar">Daftar</button></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>   

    <!-- Modal -->
    <div class="modal fade" id="modal-login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal Login</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="text" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" class="form-control">
                        </div>                       
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary">Login</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-daftar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal Daftar</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label>Nama</label>
                            <input type="text" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="text" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" class="form-control">
                        </div>                       
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary">Daftar</button>
                </div>
            </div>
        </div>
    </div>
    <!-- akhir modal -->

    <!-- akhir menu navigasi -->

            <div class="col-md-12" style="padding: 0">
            <h2 style="margin-top: 0">Tutorial Membuat Template Sederhana Dengan Bootstrap</h2>
            <br/>
            <div class="thumbnail">
                <img src="bss.png">
            </div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                lorem
            </p>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                lorem
            </p>
            <table class="table table-bordered table-hover">
                <tr>
                    <th class="col-md-1">No</th>
                    <th>Nama</th>
                    <th>Alamat</th>
                    <th class="col-md-1">Usia</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Diki Alfarabi Hadi</td>
                    <td>Aceh</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Diki Alfarabi Hadi</td>
                    <td>Aceh</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Diki Alfarabi Hadi</td>
                    <td>Aceh</td>
                    <td>23</td>
                </tr>
            </table>
           
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                lorem
            </p>
               

            <br/>   
            <h3>Related Posts</h3><br/>

            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <img src="html.png" alt="..." style="width: 50%; height: 50%; ">
                    <div class="caption">
                        <h3><a href="#">Tutorial html</a></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>                               
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <img src="css.png" alt="..." style="width: 50%; height: 50%;">
                    <div class="caption">
                        <h3><a href="#">Tutorial css</a></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </p>                               
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <img src="php.png" alt="..." style="width: 50%; height: 50%">
                    <div class="caption">
                        <h3><a href="#">Tutorial php</a></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </p>                               
                    </div>
                </div>
            </div>
        </div>
   
    </div>
    <br/>
   
   
    <div class="clearfix"></div>
       
    <nav class="navbar navbar-default" style="bottom: 0;margin: 0">
        <div class="container">           
            <ul class="nav navbar-nav">
                <li><a href="#">Copyright @ 2017 Amirul Muttaqin. All rights reserved.</a></li>               
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Develop by Amirul Muttaqin</a></li>                                   
            </ul>
        </div>
    </nav>
</body>
</html>


Dan di bawah ini adalah hasil dari script di atas



Referensi : malasngoding.com

Sabtu, 25 Maret 2017

Membuat Grid System Pada Bootstrap

on Maret 25, 2017 Tidak ada komentar


Grid System Pada Bootstrap
Grid System Pada Bootstrap ini merupakan pengaturan ukuran yang di tampilkan pada monitor dan Grid System ini berfungsi untuk membuat pengaturan untuk lebar dari masing-masing komponen web sehingga kita dapat bebas mengatur Responsive halaman website yang kita buat dengan bootstrap. Bootstrap memiliki 12 grid yang nantinya kita akan dapat menggunakan class berikut ini untuk mengatur keresponsive an halaman website dengan mengaturnya menggunakan 12 grid bootstrap. Bootstrap memiliki beberapa class grid yang masing-masing nya memiliki kegunaannya . Mengenal Grid System Bootstrap :
  • col-lg-* ini dugunakan untuk mengatur grid pada monitor komputer yang berukuran besar.
  • col-md-* ini digunakan untuk mengatur grid pada layar monitor komputer yang berukuran sedang.
  • col-sm-* ini digunakan untuk mengatur grid pada monitor yang berukuran tablet.
  • col-xs-* ini digunakan untuk mengatur grid untuk ukuran handphone.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Belajar bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style type="text/css">
    div{
      background: #2ea3f2;
      text-align: center;
      border: 1px solid #fff;
      padding: 10px;
      color: #fff;
    }
  </style>
</head>
<body>
      <center><h1>Mengenal Grid System Bootstrap </h1></center>
    <br/>
    <div class="col-md-12">.col-md-12</div>
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-2">.col-md-2</div>
    <div class="col-md-2">.col-md-2</div>
    <div class="col-md-2">.col-md-2</div>
    <div class="col-md-2">.col-md-2</div>
    <div class="col-md-2">.col-md-2</div>
    <div class="col-md-2">.col-md-2</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
</body>
</html>

Di bawah ini adalah hasil dari script di atas



Jadi dapat di simpulkan Bootstrap membagi halaman website menjadi 12 grid dan kita bebas ingin menggunakan beberapa grid untuk menentukan lebar sebuah emelent yang ingin kita buat. Ukuran col-md-1 adalah ukuran yang paling kecil seperti yang dapat di lihat pada gambar di atas tadi. Penggunaan col-md untuk mengatur ukuran lebar pada monitor yang sedang dan col-lg untuk ukuran monitor yang besar begitu juga untuk col-xs dan col-sm seperti yang sudah dijelaskan pada penjelasan tentang class grid bootstrap di atas.
Dan ini contoh sederhananya jika kita misalnya memiliki dua bua kotak dan pada ukuran leptop biasa, kita ingin menampilkan kotak tersebut dengan bersampingan maka kita memberikan col-md-6 pada masing-masing kotak dan jika dibuka melalui smartphone misalnya kita ingin masing-masing kotak tersebut di tampilkan dengan lebar penuh maka kita bisa menambahkan lagi col-xs-12 pada masing-masing element kotak dan di bawah ini contohnya :

<!DOCTYPE html>
<html>
<head>
<title>Belajar bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style type="text/css">
    div{
      background: #2ea3f2;
      text-align: center;
      border: 1px solid #fff;
      padding: 10px;
      color: #fff;
    }
  </style>
</head>
<body>
      <center><h1>Mengenal Grid System Bootstrap</h1></center>
    <br/>
    <div class="col-md-6 col-xs-12">.col-md-6 col-xs-12</div>
    <div class="col-md-6 col-xs-12">.col-md-6 col-xs-12</div>
</body>
</html>

Di bawah ini adalah hasil dari script di atas


Dan ketika kita beralih mode ke handphone hasilnya maka akan seperti di bawah ini


Di bawah ini adalah contoh untuk grid system yang lain

<!DOCTYPE html>
<html>
<head>
<title>Belajar bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style type="text/css">
    div{
      background: #2ea3f2;
      text-align: center;
      border: 1px solid #fff;
      padding: 10px;
      color: #fff;
    }
    .konten{
      height: 300px;
    }
    .sidebar{
      height: 300px;
    }
  </style>
</head>
<body>

    <center><h1>Mengenal Grid System Bootstrap</h1></center>
    <br/>
    <div class="col-md-12 col-xs-12">Ini header</div>
    <div class="col-md-9 col-xs-12 konten">Ini konten</div>
    <div class="col-md-3 col-xs-12 sidebar">Ini sidebar</div>
    <div class="col-md-12 col-xs-12">Ini footer</div>
</body>
</html>

Di bawah ini adalah hasil dari script di atas.

 di bawah ini adalah hasil ketika kita pindah mode ke mode handphone



Referensi : malasngoding.com
Langganan: Postingan ( Atom )