Cara Membuat Download Box Generator Menggunakan AngularJS - Code Pelajar

Code Pelajar - Pada kesempatan kali ini Code Pelajar akan membagikan sebuah tutorial Membuat Download Box Generator Menggunakan AngularJS. Dimana pengimplementasiannya bisa dimana saja wordpress,blogger, atau halaman HTML biasa. Min emang fungsinya apaansih Download Box Generator tuh? Download Box Generator ini berfungsi buat kamu yang malas ngoding dan ingin instan dalam membuat sebuah download box, biasanya dipakai untuk website-website download.

Angular js adalah sebuah framework javascript open source yang dirilis oleh google pada tahun 2009, konsep dari angular itu sendiri memiliki konsep yang sama dengan framework lainnya yaitu memiliki konsep (M,V,C) yaitu model, view, controller. - Dumet School

Download Box generator ini menggunakan AngularJS dalam pengimplementasiannya terus apa hubungannya sama download box ini min? Kayaknya Blockquote diatas juga sudah jelas deh Jadi intinya AngularJS ini konsepnya Single Page Application atau bahasa indonesianya Aplikasi Satu Halaman maka cocok banget di implementasikan dengan download box generator ini, lebih lanjutnya coba kalian coba terapkan dulu download box dibawah ini setelah itu berikan tanggapan kalian di kolom komentar.


Cara Membuat Download Box Menggunakan AngularJS

  1. Buatlah sebuah halaman HTML, jika kamu menggunakan Blogger atau Wordpress silahkan buatlah sebuah halaman Kosong.
  2. Saya Pikir ketika saya menyuruh kalian membuat halaman html kosong pastinya sudah paham kan? hehe. Jika kebetulan sobat masih ada yang belum paham, mari bertanya saja di kolom komentar dibawah.
  3. Jika Sudah sobat masukkan CDN Jquery dan CDN AngularJS berikut. Jika Sudah ada tidak perlu di include lagi kedalam halaman atau tema
  4. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>
  5. Sudah? oke baiklah langsung saja kalian Coba salin dan terapkan kode CSS berikut ini kedalam halaman HTML yang sudah kalian buat tadi.
  6. <style type="text/css">
    /*DLGEN - Codepelajar.com*/
        .container{max-width:640px;margin:24px auto}#dbox{background:#fff;padding:24px;line-height:1.6;box-sizing:border-box}#dbox *{box-sizing:border-box}.dbox-head{text-align:center;padding:24px;background:rgba(0,0,0,0.5);color:#fff;margin-bottom:24px}.dbox-head h4{margin:0;font-size:24px}.dbox-input label{display:inline-block;width:100%;margin-bottom:5px}.dbox-input input[type="text"]{padding:10px  10px;border-radius:4px;border:2px solid rgba(0,0,0,0.2);font-size:16px;width:100%;margin-bottom:10px}.dbox-row{display:flex;flex-wrap:wrap;width:100%}.dbox-full{width:100%;padding:0 5px}.dbox-cell-2{width:50%;padding:0 5px}.dbox-output{width:100%}.cp-dbox{padding:10px}.cp-dbox-title{background:#222;padding:10px 12px;text-align:center;color:#fff;margin-bottom:14px}.cp-dbox-body{text-align:center}.cp-dbox-body .rs_uf{}.cp-dbox-body .rs_uf{font-weight:bold;margin-bottom:5px}.cp-dbox-body .ld a{display:inline-block;padding:8px 14px;text-decoration:none}.dbox-output{width:100%}.cp-dbox{padding:10px}.cp-dbox-title{background:#222;padding:10px 12px;text-align:center;color:#fff;margin-bottom:14px}.cp-dbox-body{text-align:center}.cp-dbox-body .rs_uf{}.cp-dbox-body .rs_uf{font-weight:bold;margin-bottom:5px}.cp-dbox-body .ld a{display:inline-block;padding:8px 14px;text-decoration:none}.dbox-tarea{width:100%;max-width:100%;height:300px;padding:14px;border-radius:4px;border:2px solid rgba(0,0,0,0.2);resize:none}
    </style>
  7. Jika sudah salin dan terapkan kode html berikut ini kedalam halaman html yang kalian buat tadi
  8. <div class='container'>
      <div id='dbox' ng-app="">
        <div class='dbox-head'>
          <h4>Download Generator - AngularJS</h4>
          <span>By - codepelajar.com</span>
        </div>
        <div class='dbox-input'>
          <div class='dbox-row'>
            <div class='dbox-full'>
              <label>Nama Anime</label>
              <input type='text' ng-model='nama_anime' />
            </div>
            <div class='dbox-cell-2'>
              <label>Resolusi</label>
              <input type='text' ng-model='resolusi_1' />
            </div>
            <div class='dbox-cell-2'>
              <label>Ukuran File</label>
              <input type='text' ng-model='file_size_1' />
            </div>
            <div class='dbox-cell-2'>
              <label>Server 1</label>
              <input type='text' ng-model='nama_server_1_1' />
            </div>
            <div class='dbox-cell-2'>
              <label>Url</label>
              <input type='text' ng-model='url_1_1' />
            </div>
            <div class='dbox-cell-2'>
              <label>Server 2</label>
              <input type='text' ng-model='nama_server_1_2' />
            </div>
            <div class='dbox-cell-2'>
              <label>Url</label>
              <input type='text' ng-model='url_1_2' />
            </div>
            <div class='dbox-cell-2'>
              <label>Server 3</label>
              <input type='text' ng-model='nama_server_1_3' />
            </div>
            <div class='dbox-cell-2'>
              <label>Url</label>
              <input type='text' ng-model='url_1_3' />
            </div>
            <div class='dbox-cell-2'>
              <label>Server 4</label>
              <input type='text' ng-model='nama_server_1_4' />
            </div>
            <div class='dbox-cell-2'>
              <label>Url</label>
              <input type='text' ng-model='url_1_4  ' />
            </div>
            <div 
          </div>
        </div>
        <div class='dbox-output'>
           <div class='cp-dbox'>
             <h4 class='cp-dbox-title'>{{  nama_anime}}</h4>
             <div class='cp-dbox-body'>
                <div class='rs_uf'>
                  <span>{{ resolusi_1 }}</span> | <span>{{ file_size_1 }}</span>  
                </div>
               <div class='ld'>
                 <a href='{{url_1_1}}'>{{nama_server_1_1}}</a><a href='{{url_1_2}}'>{{nama_server_1_2}}</a><a href='{{url_1_3}}'>{{nama_server_1_3}}</a><a href='{{url_1_4}}'>{{nama_server_1_4}}</a>
               </div>
             </div>
             
          </div>
        </div>
        <textarea class='dbox-tarea'></textarea>
      </div>
    </div>
  9. Jika Sudah masukkan kode Js berikut kedalam halaman HTML kalian, letakkan dimana min? emm terserah bisa di paling atas,paling bawah, atau di tengah-tengah css dan html form nya.
  10. <script type="text/javascript">$(document).ready(function(){
      setInterval(function(){
        $('#dbox textarea').val($(".dbox-output").html())
      })
    })</script>
  11. Simpan dan lihat hasil Halaman HTML kalian.
TagKeterangan
ng-app=""untuk memperkenalkan kepada browser bahwa file html atau element html tersebut menggunakan AngularJS
ng-model"variabel"mengambil nilai pada tag HTML bisa tag ( input , select , textarea )
{{variabel}}merupakan expressions dari angularJS. fungsi nya untuk menampilkan apa yang ingin kita tampilkan. sama halnya seperti syntax echo jika di php.

Apakah penjelasan tabel masih kurang? hmm coba simple nya seperti ini sob,

 
<div class="container">
<!--
Memberikan atau mendeklarisikan aplikasi dengan attribute nge-app 
pada element <div class="dlbox" nge-app=""> 
-->    
<div class="dlbox" nge-app="">
<div class="form-input-data">
<!--
Membuat sebuah tag input dan memberikan sebuah attribute ng-model
dengan Variabel 'nama_ku'
-->    
<input type='text' ng-model='nama_ku' />
</div>
<div class="output-data">
<!--
Karena variabel expressions <h1> sama dengan variabel ng-model pada input field
maka ketika aplikasi di jalankan akan menghasilkan output pada <h1> dari yang sudah kita masukkan/isi pada input field,
-->    
<h1>{{nama_ku}}</h1>
</div>
</div>
</div>

okelah sekian dulu pembahasan tentang AngularJS saya harap kalian paham dan setelah membaca artikel ini jadi bertambah wawasan kalian atau jika yang sudah paham jadi inget atau tambah paham. masih banyak kekurangan memang tapi kami mencoba yang terbaik dengan share hasil belajar kami. see you next tutorial React Native seri pertama ya Sob.

Table Of Content

    Contact Form

    Kirim