Showing posts with label JS. Show all posts
Showing posts with label JS. Show all posts

Tuesday, July 21, 2015

GALLERY PHOTO THUMB WITH BOOTSTRAP 3 (DOWNLOAD)

Assalamu'alaikum Warohmatullohi Wabarokatuh.
Apaka kabar para pembaca.
Semoga kita semua selalu dalam lindungan Allah Tuhan Yang Maha Esa.
Amin Ya Robbal Alamin.

Pada kesempatan ini saya ingin berbagi sedikit mengenai BOOTSTRAP 3.
Ya, setelah saya pelajari ternyata bootstrap 3 lebih nyaman digunakan dari pada versi yang sebelumnya,
dan saya memcoba untuk membuat sebuah template yang nantinya akan saya gunakan untuk membuat
sebuah website Directory Alumni.

Website ini nantinya akan berisi data-data siswa/i tepatnya mantan siswa/i dari sebuah sekolah.
Dimana setiap mantan siswa/i tersebut bergabung di dalamnya untuk mengobrol, berbagi kenangan masa lalu,
dan hal-hal lain.

Eits, maaf.
Kembali ke judul besar kita, template ini tidak saya bandrol dengan harga.
Yaps, benar! Ini free... for you.

Langsung saja ini tampilannya :

  



Dan link downloadnya ada disini.
DOWNLOAD


Ya,walaupun masih jelek tapi sudah cukup deh untuk digunakan sebagai template website dibanding dengan template yang di buat dengan CSS sendiri.

Terima kasih atas kunjungan Anda.
Jika terdapat kata-ata yang SALAH saya meminta maaf,
Pada Allah saya meminta Ampun.
Akhirul kalam.
Wassalamu'alaikum Warohmatullohi Wabarokatuh.

Kritik dan Saran Anda dapat menjadi hal yang paling bermanfaat untuk blog ini.

Monday, July 20, 2015

ANGULAR JS INPUT FORM DAN COMBOBOX TUTORIAL

kAssalamu'alaikum Warohmatullohi Wabarokatuh.

Hay, apa kabar pembaca !
Pada hari ini saya akan membagikan sedikit trik form dengan ANGULAR.js
Nah,berikut ini adalah struktur dasar dalam penggunaan angular.js.

<!DOCTYPE html>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
     //code-disini
</body>
</html>

Nah, bagi Anda yang ingin mendownload file angular.js untuk lokal bisa di download DISINI.
Sekarang mari kita lanjut ke contoh pertama ( dasar ).

Buat sebuah folder dengan nama "terserah" kemudian copy file angular.js kedalamnya.
Lalu, buat sebuah file dengan file editor dan simpan dengan nama input.php / input.html

Berikut code yang harus di buat :
<!DOCTYPE html>
<html lang="en-US">
<script src="angular.min.js"></script>
<body>
     <div ng-app="">
         <p>Nama Lengkap : <input type="text" ng-model="nama"></p>
         <h1>Selamat datang {{nama}}</h1>
    </div>
</body>
</html>
Untuk hasilnya Anda bisa melihatnya setelah Anda mencoba. 
Kemudian kita inovasikan dengan sebuah combobox, menjadi seperti berikut :
<!DOCTYPE html>
<html lang="en-US">
<script src="angular.min.js"></script>
<body>
     <div ng-app="">
         <p>Nama Lengkap : <input type="text" ng-model="nama"></p>
         <p>Jenis Kelamin :
                <select ng-model="jkelamin"> 
                    <option value="Laki-laki">Laki-laki</option>
                     <option value="Wanita">Wanita</option> 
                 </select>
         </p>

         <h1>Nama Lengkap {{nama}}</h1>
         <h1>Jenis Kelamin {{jkelamin}}</h1>
    </div>
</body>
</html>

Maka hasilnya adalah seperti dibawah ini :
 Contoh :


Nama Lengkap :
Jenis Kelamin :

Nama Lengkap : {{nama}}

Jenis Kelamin : {{jkelamin}}