Tutorial CRUD Sederhana pada CodeIgniter

<<Download>>

Selengkapnya

Cara Membuat Template Login dengan HTML + CSS

Template merupakan suatu hal yang familiar di bidang web. Banyak orang menggunakan template sebagai media latar belakang yang dapat mempercantik web mereka. Pada artikel kali ini saya akan mencoba membagikan ilmu tentang bagaimana cara membuat template login sendiri menggunakan kombinasi script HTML dan CSS.

Sekedar mengingatkan, script CSS tentu saja dapat digabung kedalam file HTML. Namun, untuk kerapian dari susunan script kebanyakan orang memisahkan script tersebut dan menghubungkannya dengan media sebuah link. Pada artikel kali ini saya akan menyelipkan script CSS kedalam file HTML dengan pemisah :

<style> disini script CSS-nya </style>

Langkah pertama
Ketikkan script HTML seperti dibawah ini :

<h1>Template Login By : duasatuberbagi.blogspot.com</h1>
<div class="stand">
<div class="outer-screen">
<div class="inner-screen">
<div class="form">
<input type="text" class="zocial-dribbble" placeholder="Username" />
<input type="text" placeholder="Password"/>
<input type="submit" value="Masuk" />
<a href="">Lupa Password?</a>
</div> 
</div> 
</div> 
</div>

Langkah Kedua
Setelah tag </div> yang bercetak tebal diatas ketikkan script CSS berikut :

<style>
body{
  margin: 0px;
  padding: 0px;
  background: #31b6f4;
}
h1{
  color: #fff;
  text-align: center;
  font-family: Arial;
  font-weight: normal;
  margin: 2em auto 0px;
}
.outer-screen{
  background: #13202c;
  width: 900px;
  height: 540px;
  margin: 50px auto;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  position: relative;
  padding-top: 35px;
}

.outer-screen:before{
  content: "";
  background: #3e4a53;
  border-radius: 50px;
  position: absolute;
  bottom: 20px;
  left: 0px;
  right: 0px;
  margin: auto;
  z-index: 9999;
  width: 50px;
  height: 50px;
}
.outer-screen:after{
  content: "";
  background: #ecf0f1;
  width: 900px;
  height: 88px;
  position: absolute;
  bottom: 0px;
  border-radius: 0px 0px 20px 20px;
  -moz-border-radius: 0px 0px 20px 20px;
  -webkit-border-radius: 0px 0px 20px 20px;
}

.stand{
  position: relative;  
}

.stand:before{
  content: "";
  position: absolute;
  bottom: -150px;
  border-bottom: 150px solid #bdc3c7;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  width: 200px;
  left: 0px;
  right: 0px;
  margin: auto;
}
.stand:after{
  content: "";
  position: absolute;
  width: 260px;
  left: 0px;
  right: 0px;
  margin: auto;
  border-bottom: 30px solid #bdc3c7;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  bottom: -180px;
  box-shadow: 0px 4px 0px #7e7e7e
}
.inner-screen{
  width: 800px;
  height: 340px;
  background: #31b6f4;
  margin: 0px auto;
  padding-top: 80px;
}
.form{
  width: 400px;
  height: 230px;
  background: #edeff1;
  margin: 0px auto;
  padding-top: 20px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
input[type="text"]{
  display: block;
  width: 309px;
  height: 35px;
  margin: 15px auto;
  background: #fff;
  border: 0px;
  padding: 5px;
  font-size: 16px;
   border: 2px solid #fff;
  transition: all 0.3s ease;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
input[type="text"]:focus{
  border: 2px solid #31b6f4
}
input[type="submit"]{
  display: block;
  background: #31b6f4;
  width: 314px;
  padding: 12px;
  cursor: pointer;
  color: #fff;
  border: 0px;
  margin: auto;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  font-size: 17px;
  transition: all 0.3s ease;
}
input[type="submit"]:hover{
  background: #09cca6
}
a{
  text-align: center;
  font-family: Arial;
  color: gray;
  display: block;
  margin: 15px auto;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 12px;
}
a:hover{
  color: #31b6f4;
}
::-webkit-input-placeholder {
   color: gray;
}
:-moz-placeholder { /* Firefox 18- */
   color: gray;  
}
::-moz-placeholder {  /* Firefox 19+ */
   color: gray;  
}
:-ms-input-placeholder {  
   color: gray;  
}
</style>

Langkah Ketiga

Setelah semua script anda ketik, sekarang saatnya anda menyimpan hasil ketikan tersebut dengan nama "login.html".

Silahkan jalankan file .html tersebut dengan browser. Maka hasilnya akan sama seperti gambar diatas.

Cukup sekian artikel saya tentang Cara Membuat Template Login dengan HTML + CSS.
Untuk kemajuan blog ini, please Subscribe and Share, Terimakasih.

Selengkapnya

Solusi Subtitle Film yg Tidak ditemukan Dalam Bahasa Indonesia

Sobat DUASATU bingung tidak menemukan subtitle Film dengan bahasa Indonesia ??? Jangan risau, karna salah satu teman saya sudah memberikan sebuah solusi jitu. Dan hari ini, akan saya share kepada sobat DUASATU sekalian.

Syarat mutlak yang harus sobat lengkapi yaitu koneksi internet, satu perangkat laptop, atau komputer. Jika sudah lengkap, saya akan menceritakan pengalaman saya.

Beberapa hari yang lalu saya berhasil mendownload sebuah film aksi yang belum keluar di bioskop melalui Layarkaca21.com , judulnya Arrowhead namun sayangnya, film ini tidak dilengkapi subtitle berbahasa indonesia. Sayapun bingung mencari subtitle di berbagai situs. Akhirnya pada situs ini saya menemukan subtitlenya, namun sangat disayangkan lagi subtitle yang ada hanya berbahasa Inggris dan bahasa Rusia. Setelah mendapatkan pencerahan dari teman saya ini, saya memutuskan untuk mendownload subtitile yang berbahasa Inggris tersebut, dan merubahnya ke dalam bahasa indonesia. Caranya bagaimana ?? Simak penjelasan berikut dengan seksama.

1. Download subtitle yang merupakan sebuah file berekstensi "srt".
2. Buka file tersebut dengan menggunakan notepad.
3. Lalu tekan CTRL+A untuk seleksi secara keseluruhan.
4. Tekan CTRL+C untuk mengkopi tulisan yang sudah diseleksi.
5. Buka situs ini 
6. Pastekan tulisan yang sudah dikopi tadi kedalam kolom Inggris
   
7. Maka sobat akan mendapatkan translate bahasa indonesianya pada kolom sebelah kanan.
8. Klik ikon seperti gambar dibawah untuk mengkopi tulisan secara keseluruhan.
   
9. Lalu pastekan ke notepad yang tadi sudah dibuka, sebelumnya hapus dulu tulisan yang berbahasa inggris.
10. Sejauh ini kita sudah berhasil mengubah subtitle tersebut kedalam bahasa Indonesia. Namun jika kita pakai ke dalam Film, hasilnya tidak akan sesuai.
11. langkah berikutnya, edit subtitle tersebut agar dapat dipakai pada film tersebut.
12. Tekan CTRL+H pada notepad yang berisi tulisan bahasa Indonesia.
    
13. Setelah tampil seperti gambar diatas, ketik "->" (strip dan tutup kurung siku) pada kolom Find what.
14. Pada kolom Replace with, ketik tulisan "-->" (double strip dan tutup kurung siku).
15. Klik Tombol Replace All.
16. Save
17. Finish.

Wah, panjang juga ya caranya.. Tapi ini lah kenyataan jika kita tidak pandai berbahasa inggris. Untuk sobat DUASATU yang membaca postingan ini, jangan pernah bosan untuk belajar bahasa Inggris, karna Bahasa internasional ini sangat bermanfaat.
Terimakasih, silahkan tinggalkan komentar dan share jika bermanfaat.

Thank's to: Benny Hariyanto

Selengkapnya

Cara Mengatasi EditPlus yang Selalu menghasilkan File .BAK

File .bak memang kadang menggangu. File ini sering kita temui ketika selesai mengerjakan project dengan software EditPlus. Sobat DUASATU tau apa itu file .bak yang di hasilkan oleh EditPlus ini ?

File .bak yang dihasilkan dari software ini merupakan file backup. Bertujuan untuk berjaga-jaga apabila anda tidak sengaja menghapus salah satu file project anda, anda dapat mengembalikannya.

Jika sobat DUASATU merasa terganggu akan hal ini, sobat dapat menonaktifkan / disable tools ini.

Langsung saja ikuti langkah berikut :

1. Buka aplikasi EditPlus.
2. Klik Tools >> Preferences
   
3. Lalu klik File.
4. Setelah itu, hilangkan centang yang ada pada "Create backup file when saving". Lalu klik ok.
   
   Nah, sekarang sudah tau kan, bagaimana cara menghilangkan file yang dirasa menggangu ini..
   OK cukup sekian tutorial kali ini, maaf tidak begitu panjang karna waktu shalat Jum'at bentar lagi masuk..
   Terimakasih, jangan lupa Share dan tinggalkan Komentar.
   

   

Selengkapnya

Cara Mengetahui Kapan Terakhir kali Install Ulang Windows

Pada zaman yang super cangih ini kita sangat bergantung pada perangkat komputer, gedget atau media lainnya. Tidak jarang, hampir semua pengguna sudah dapat menginstal ulang laptop, atau androidnya sendiri. Apalagi jika baru pandai, pastinya akan ketagihan bukan (pengalaman).

Nah kali ini saya akan berbagi ilmu pada sobat DUASATU, tentang bagaimana cara untuk mengetahui kapan terakhir kali laptop diinstal ulang. Untuk tutorial kali ini saya tidak akan menggunakan software atau aplikasi pihak ketiga, namun saya akan langsung menggunakan sebuah tools yang disediakan windows. 

CMD, ya Command Promp. sebuah tools dimana user dapat mengetikkan perintah langsung pada sistem. Untuk tidak memperbanyak basa basi, langsung saja kita ikuti langkah berikut :

1. Buka CMD dari laptop sobat dengan cara menekan tombol "Windows+R" (secara berbarengan).
2. Setelah jendela Run ini terbuka, langsung sobat ketikkan "CMD" tanpa tanda petik.
3. Maka CMD akan keluar.
   
4. Setelah itu sobat ketikkan perintah "systeminfo" tanpa petik.
5. Tunggu loading beberapa saat, setelah itu sobat akan menemukan beberapa informasi tentang sistem yang ada di laptop sobat.
   
6. Lalu cari tulisan Original Install Date seperti gambar dibawah.
   

Nah, itu lah tanggal dan jam terakhir kali laptop sobat diinstal ulang. Bagaimana, cukup mudah bukan ???
Kalau begitu cukup sekian postingan kali ini, semoga bermanfaat, jangan lupa tinggalkan komentar dan bagikan postingan ini.
Terimakasih.

UPDATE: "Cara ini ditujukan untuk Windows 7,8,8.1,10 Untuk Windows XP dapat dengan cara mengetikkan perintah systeminfo|find /i "instal"
Dikutip dari agan Dewa Dirga" 

Selengkapnya