Kamis, 23 Maret 2017

Membuat Modal pada Bootstrap

on Maret 23, 2017


Membuat Modal Pada Bootstrap

 Modal adalah sebuah Kotak Dialog untuk menampilkan pesan atau konfirmasi untuk suatu aksi. Kita bisa membuat promosi dengan Modal untuk membuat pernyataan suatu data maka kita bisa menggunakan Modal untuk membuat pernyataan konfirmasi seperti "Apakah Anda yakin ingin mengabus data ini ?" dan masih banyak lagi kegunaan dari Modal karena kita juga bisa menampilkan data dalam bentuk Modal.
     Bootstrap menyediakan sebuah Plugin Modal yang bisa kita gunakan dengan sangat mudah sekali.

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>
  <div class="container">  
  <center><h1>Membuat Modal dengan Bootstrap</h1></center>
  <br/>
  <!-- Tombol untuk menampilkan modal-->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Buka Modal</button>

  <!-- Modal -->
  <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- konten modal-->
      <div class="modal-content">
        <!-- heading modal -->
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Selamat Anda Beruntung</h4>
        </div>
        <!-- body modal -->
        <div class="modal-body">
          <p>Selamat Anda Telah Mendapatkan hadiah mobil. Dan bisa langsung di ambil di dealer terdekat, dengan syarat membayarnya dengan lunas </p>
        </div>
        <!-- footer modal -->
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Tutup Modal</button>
        </div>
      </div>
    </div>
  </div>
   </div>

</body>
</html>

Di Bawah ini adalh hasil dari script di atas



Dan ini ketika modal di tekan



Referensi : malasngoding.com

Rabu, 22 Maret 2017

Membangun Website sekolah dengan cms mysch.id

on Maret 22, 2017

A. Latar Belakang

   Di zaman sekarang ini banyak sekali cara mudah unruk membuat website sekolah dengan mudah, bisa dengan gratis maupun berbayar, seprti contoh CMS sekolahku, wordprees, dan mysch.id, untuk yang saya pakek ini adalah mysch.id yang langsung mendapat domain resmi dari sch.id.

B. Pengertian
  
     Mysch.id adalah situs yang menyedikan layanan pembuatan website sekolah secara instan. Disini, Anda dapat membuat website sendiri tanpa memerlukan keahlian di bidang web desain dan programming. Yang Anda lakukan adalah mengisi pada formulir yang tersedia, memilih tema desain, kemudian dalam waktu kurang dari 1 menit, website sekolah Anda langsung online.

Anda bisa mulai membuat website dengan menggunakan domain gratis .mysch.id (contoh : websiteanda.mysch.id). Namun jika menginginkan, Anda bisa menggunakan domain (.sch.id) yang merupakan top domain resmi khusus untuk sekolah di Indonesia.

Lalu apa yang membedakan Mysch.id dengan layanan CMS lain? Yang paling membedakan adalah, website sekolah yang Anda buat di sistem mysch.id benar-benar sudah jadi, sudah terisi kontennya, dengan tema desain yang profesional, dan website Anda langsung online. Memang konten websitenya masih belum sesuai dengan profil sekolah Anda, tapi paling tidak, Anda sudah memiliki gambaran isi sebuah website sekolah yang profesional. Mungkin juga desain websitenya belum sesuai dengan brand identity sekolah Anda, namun Anda bisa mengganti semuanya baik logo, favicon, slideshow, serta tema desain yang cocok dengan karakter sekolah Anda. Kami memiliki puluhan tema desain yang bisa diganti sesuai selera Anda.

C. Maksud dan tujuan

  Membuat website sekolah dengan cepat dan langsung mendapat domain resmi sch.id.

D. Pembahasan

1. Kita masuk ke website resminya yaitu : https://mysch.id/

2. Kita bisa langsung buat website sekolah kita dengan kita clik buat sekarang. 



3.Setelah itu kita cek atau masukkan nama sekolah kita untuk pembangunan website menggunakan mysch.id

 

4. Kita isi Identitas sekolah kita dan identitas kita sendiri sebagai admin untuk web sekolah kita.

 

5. Setelah mengisi detail website di atas kita bisa langsung cek hasil dari website yang kita bangun menggunakan cms mysch.id

  Nb : kita langsung bisa klik bacaan DISINI lalu kita bisa melihat hasilnya

6. Kita bisa langsung cek hasilnya di browser kita dan seperti ini lah tampilan default nya
 
 
7. Kita bisa langsung cek email kita di dalam email kita akan langsung ada pesan masuk dari mysch.id dan di dalamnya tertera username dan password admin dam beserta link untuk masuk ke halaman login admin. 


8. Kita langsung bisa masuk ke login admin

  
Nb : user dan password default bisa langsung di cek di email kita masing-masing, dan itu di atas telah di edit untuk mempermudah masuk ke halaman admin

9. Dan setelah kita masuk ke halaman admin kita bisa bebas untuk mengoprek isi yang ada pada halaman admin tersebut.


   10. kita bisa langsung mengoprek isi yang telah tersedia di dalam cms mysch.id perlu di ketahui mysch.id ini khususnya bagi yang menggunakan domain gratis terdapat beberapa di antara konten yang tersedia belum aktif, mengapa demikian karena kita msaih menggunakan domain gratisan, kalau ingin fitur-fitur yang lengkap nan unlimited kita bisa upgrade aja ke paket profisional.

11. Ini adalah link website sekolah yang saya bangun dengan cms mysch.id http://smknuruljadid.mysch.id/  

E. KESIMPULAN
     
      Pada zaman yang maju ini kiata bisa membangun website sekolah dengan gampang dan tanpa modal keahlian yang sangat tinggi cukup ngerti alur dan logikanya kita bisa membuat website tersebut. dengan bantuan seprti CMS, Wordpress. dan masih banyak lagi yang lain.

F. REFERENSI

  • http://mysch.id/
  • http://thisismymovement2016.blogspot.co.id/2016/03/membangun-website-sekolah-responsif.html      

Selasa, 21 Maret 2017

Membuat Background Parallax

on Maret 21, 2017

A. Latar Belakang

       Istilah parallax sendiri pertama kali berawal dari efek visual 2 dimensi pada video game dimana latar belakang dan objek terpisah seolah-olah menciptakan ilusi kedalaman antara objek tersebut. Terkadang latar belakang bergerak lebih lambat dibanding dengan objek karakter yang dimainkan tergantung dari interaksi. Konsep ini digunakan dalam desain web saat ini.

B. Pengertian

       efek yang biasa kita lihat ketika sedang menaiki kendaraan, objek yang berjarak dekat akan terlihat bergerak lebih cepat dibandingkan objek dengan jarak yang jauh. Parallax akan memberikan kesan 3 Dimensi jika diterapkan pada objek 2 Dimensi.
Misalnya pada kasus berikut, kita akan merubah objek 2D menjadi tampak seperti objek 3D karena seakan-akan objek-objek tersebut mempunyai jarak dan pergerakan yang berbeda. 

C. Pembahasan 
      
1. Kita harus membuka sublime text bagi pengguna linux, dan notepad atau dreemwever untuk pengguna window.
2. Lalu kita buat file baru pada sublime text tersebut dengan format .html dan .css untuk filr cssnya.
3. Kita masukkan coding htmlnya terlebih dahulu, seperti gambar di bawah ini :
4. Kita masukkan koding css nya.


5. Lalu kita cek pada bowser kita masing-masing.


D. Kesimpulan

Tanpa kita sadari perkembangan dari design web begitu cepat dan semakin menarik untuk diikuti. Para developer pun juga sudah mulai menyesuaikan diri dengan perkembangan yang terjadi. Karena permintaan dari client pun sekarang mulai mengikuti trend terbaru seperti teknik parallax scrolling.

E. Rerensi

  • http://www.crosstechno.com/blog/2013/12/apa-yang-dimaksud-parallax-web-design/
  • http://anandastoon.com/karya/tips-singkat/parallax-scrolling-pengertian-dan-pengaplikasiannya/
  • https://id.wikipedia.org/wiki/Paralaks
  • http://dimbleweb.com/blog/read/apa-itu-parallax-scrolling-pada-web-design/52 

Senin, 20 Maret 2017

Membuat Carousel pada bootstrap

on Maret 20, 2017

Carousel atau juga sering di sebut Slideshow merupakan proses manampilkan gambar yang sering di beri efek slide. Dan sangat banyak sekali Website yang menggunakan Slideshow atau Carousel.
Biasanya Carousel ini diletakkan pada halaman depan sebuah website dengan design yang berbagai macam dan tentunya menarik perhatian para pengunjung website.
     Untuk Membuat Carousel atau Slideshow sangat sulit kalau dengan cara yang manual, Tetapi dengan menggunakan Bootstrap kita akan sangat mudah untuk Membuat Carousel karena Bootstrap sudah menyediakan berbagai class terutama untuk Membuat Carousel.
Dan dibawah ini saya akan memberikan contoh seditik untuk Membuat Carousel Dengan Bootstrap.
     
Membuat Carousel Dengan Bootstrap
Yang harus kita ketahui sebelum Membuat Carousel,  yang pertama kali harus menyimpan beberapa file gambar yang kita akan kita gunakan menjadi gambar yang muncul pada Carousel.

<!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>
 <div class="container">   
  <center><h1>Membuat Carousel dengan Bootstrap</h1></center>
  <br/>
  <div class="col-md-8 col-md-offset-2">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>  
      </ol>

      <!-- deklarasi carousel -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="7.jpg" alt="indonesia indah">
          <div class="carousel-caption">
            <h3>Pesona Indonesia</h3>
            <p>Alam indonesia penuh makna</p>
          </div>
        </div>
        <div class="item">
          <img src="6.jpg" alt="Indonesia Indah">
          <div class="carousel-caption">
            <<h3>Pesona Indonesia</h3>
            <p>Alam indonesia penuh makna</p>
          </div>
        </div>
        <div class="item">
          <img src="4.jpg" alt="Indonesia Indah">
          <div class="carousel-caption">
            <h3>Pesona Indonesia</h3>
            <p>Alam indonesia penuh makna</p>
          </div>
        </div>       
      </div>

      <!-- membuat panah next dan previous -->
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
   </div>

</body>
</html>
Di bawah ini adalah hasil dari script di atas



Referensi : malasngoding.com

Membuat Collapse Pada Bootstrap

on Maret 20, 2017

Kelas .collapse menunjukkan elemen dilipat (<div> di contoh kita); ini adalah konten yang akan ditampilkan atau disembunyikan dengan mengklik tombol.
Untuk mengontrol (show / hide) isi dilipat, menambahkan data-ubah = "runtuh" atribut ke <a> atau <button> elemen. Kemudian tambahkan data-target = "# id" atribut untuk menghubungkan tombol dengan konten dilipat (<div id = "demo">) 
Catatan: Untuk elemen <a>, Anda dapat menggunakan atribut href bukan data atribut-sasaran:

contoh


Di Bawah ini adalah hasil dari script di atas


Sabtu, 18 Maret 2017

Membuat Glyphicon pada Bootstrap

on Maret 18, 2017

Bootstrap menyediakan 260 glyphicons dari Glyphicons Halfling set.
Glyphicons dapat digunakan dalam teks, tombol, toolbar, navigasi, bentuk, dll
Dan contoh Glyphicon lainnya bisa klik Disini.

Contoh Beberapa tentang glyphicon


  
Contoh


Di Bawah ini adalah hasil dari script di atas


Jumat, 17 Maret 2017

Membuat Buttons pada bootstrap

on Maret 17, 2017


Di dalan bootstrap telah menyediakan class yang bisa langsung di panggil dengan tag <div> salah satunya adalah class button.
Dan ini adalah macam-macam button yang saya ketahui.
  • .btn-default
  • .btn-primary
  • .btn-info
  • .btn-success
  • .btn-danger
  • .btn-warning
  • .btn-link
Contoh

Di bawah ini adalah hasil dari script di atas

Langganan: Postingan ( Atom )