Memilih Keyboard Yang Sesuai Dengan Penggunaannya

Bila Anda merasa bosan atau merasa tidak nyaman ketika menggunakan keyboard, Anda dapat menggantinya sesuai keinginan. Banyak jenis Keyboard yang dijual di pasaran dengan bentuk yang berbeda dan menyesuaikan dengan aktivitas pengguna. Jika Anda seorang gamers, tentu menginginkan Keyboard yang nyaman saat digunakan untuk bermain game. Namun jika Keyboard yang digunakan hanya untuk aktivitas mengetik atau hanya dipakai untuk pekerjaan kantor, Anda dapat menggunakan Keyboard yang standar. Selain penggunaan terdapat juga hal lain yang perlu diperhatikan ketika memilih Keyboard. Supaya lebih paham, berikut ini penjelasannya untuk Anda.

1. Anda perlu menyesuaikan kegunaan keyboard
Anda perlu memikirkan terlebih dahulu kira-kira Keyboard ingin digunakan untuk aktivitas apa. Kebanyakan Keyboard digunakan untuk gaming dan juga untuk aktivitas mengetik. Ketika para gamers menggunakan Keyboard, terkadang hanya tombol-tombol tertentu yang sering ditekan sehingga dibutuhkan tombol-tombol kuat, lebih tinggi dan jarak antara tombol lebih lebar. Sedangkan Keyboard khusus aktivitas mengetik dapat menggunakan Keyboard yang standar atau menggunakan Keyboard dengan desain ergonomis.

2. Pilih port penghubung yang sesuai
Port penghubung atau kabel colokan Keyboard tedapat beberapa jenis, seperti: AT, PS/2, USB dan Wireless. Jika ingin lebih nyaman menggunakan Keyboard, Anda dapat menggunakan Keyboard Wireless. Namun jika ingin menggunakan Keyboard dengan harga standar dan dapat digunakan pada Laptop dapat menggunakan Keyboard dengan Port USB. Terdapat juga USB OTG yang dapat digunakan untuk menghubungkan Keyboard ke Tablet atau Smartphone. Pilih Port yang tepat sesuai keinginan agar penggunaannya lebih mudah dan nyaman.

3. Pilih model mekanisme tombol
Pada Keyboard terdapat pilihan model mekanisme tombol, seperti: Dome-switch, Scissor-switch, Capacitive, Mechanical-switch, Buckling-spring, Hall-effect, Laser, Roll-up, Optical technology. Namun mekanisme yang sering Kita temui dalam Keyboard, seperti: Dome-switch dengan menggunakan silikon atau karet di bawah tombol, Scissor-switch menggunakan pegas plastik yang lebih nyaman ketika diklik, Mechanical-switch menggunakan teknologi pegas yang kuat sehingga tahan untuk bermain game. Kesimpulannya, bila Keyboard digunakan aktivitas bermain game dapat menggunakan Keyboard dengan mekanisme tombol Mechanical-switch sedangkan bila digunakan untuk aktivitas mengetik dapat menggunakan Scissor-switch atau Dome-switch.

4. Cari bentuk dan desain yang sesuai keinginan
Bentuk fisik Keyboard cukup penting menjadi pertimbangan ketika membeli Keyboard. Pilihlah Keyboard dengan bentuk yang lebih ergonomis jika penggunaan untuk intensitas yang tinggi. Sesuaikan juga desain dengan aktivitas yang dilakukan sehingga lebih nyaman saat menggunakannya. Ketika membeli Keyboard terkadang tersedia bantalan (wrist pad) sebagai fitur tambahan. Jika ingin lebih nyaman dapat menyertakan bantalan (wrist pad) untuk melindungi bagian bawah tangan.

5. Pilih merek Keyboard yang tepat
Pilihlah merek Keyboard yang tepat sehingga lebih awet digunakan dan tidak mudah rusak. Merek yang Kami sarankan, seperti: Razer, Logitech, SteelSeries, Microsoft. Setiap merek memiliki fitur-fitur yang berbeda dan memiliki kelebihan masing-masing.

Read More

Program Penggunaan Radio Button Pada Pemrograman PHP

Pada kesempatan kali ini Kami akan membahas mengenai penggunaan Radio Button. Radio button merupakan tombol yang digunakan untuk memilih salah satu pilihan dari beberapa pilihan yang tersedia. Radio button memang hampir mirip penggunaannya seperti checkbox, namun bedanya pada bentuk tombol. Radio button bentuknya bulat sedangkan checkbox bentuknya kotak dan terdapat ceklis bila salah satu tombolnya dipilih. Untuk membuat input radio button diperlukan beberapa perintah, seperti: tag input, type, name dan value. Radio button biasanya digunakan untuk opsi pilihan jenis kelamin pada pengisian form biodata atau yang lainnya. Dari penjelasan tersebut, Kami mencoba mempraktekan dalam sebuah program penggunaan radio button pada pemrograman PHP. Untuk lebih jelasnya, berikut ini cara pembuatan program tersebut: 

1. Pembuatan file baru pada Notepad++
Jalankan Notepad++ dan buat file baru dengan cara memilih File > New dan simpan dengan tipe ekstensi .php. Anda disarankan menyimpan file pada Local Disk > xampp > htdocs > buat folder baru untuk menyimpan file php. Bila file PHP telah dibuat, selanjutnya adalah membuat script pemrograman PHP seperti berikut ini.

<?php { ?><html><head> <title>Penggunaan Radio Button</title> <link href="style/style.css" rel="stylesheet" type="text/css" media="screen"/></head><body> <div id="wrapper"> <ul id="mainNav"> <li class="header">Penggunaan Radio Button Pada PHP</li> <li class="logout"><a href="#">Logout</a></li> </ul> <div id="containerHolder"> <div id="container"> <h2> <a href="#">Pilih Jurusan Anda :</a> »</a></h2> <div id="main"> <?php if(isset($_GET['menu'])){ include $_GET['menu'].".php"; } ?> <form ACTION="radiobutton.php" METHOD="POST" NAME="input"> <h2> <input type="radio" name="jurusan" value="TI (Teknik Informatika)" checked>Teknik Informatika<br/> <input type="radio" name="jurusan" value="SI (Sistem Informasi)" >Sistem Informasi<br/> <input type="radio" name="jurusan" value="MI (Manajemen Informatika)" >Manajemen Informatika<br/> <input type="radio" name="jurusan" value="KA (Komputerisasi Informatika)" >Komputerisasi Informatika<br/><br/> <input type="submit" name="Pilih" value="Pilih" class="submit"> </h2> </FORM> <div id="hasil"> <?php if (isset($_POST['Pilih'])){ $Jurusan = $_POST['jurusan']; echo "Jurusan anda adalah : <b><font color= 'sky blue'>$Jurusan</font></b>"; } ?> </div> </div> <div class="clear"> </div> </div> </div> <p id="footer"> </p> </div> </body> </html><?php } ?>

2. Buatlah desain program 
Buat file CSS menggunakan Notepad++ dengan memilih File > New dan simpan dengan nama style.css. File style digunakan untuk mendesain tampilan file PHP agar terlihat lebih menarik.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, normal, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remove textarea resize at Safari */ textarea { resize: none; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } /* Basic ---------------------------------------- */ .clear { clear: both; } body { background:url(../images/background.jpg); font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #646464; text-align: center; } #wrapper { text-align: left; width: 930px; margin: 20px auto; } /* Logo ---------------------------------------- */ h1 { margin: 15px 0 10px 5px; width: 225px; height: 28px; font-size: 30; } h1 a { display: block; width: 225px; height: 28px; } h1 span { display: none; } /* Main Navigation ---------------------------------------- */ #mainNav { width: 918px; height: 37px; padding: 6px; margin: 0 0 10px 0; background: url(../images/top-menu-bg.gif) no-repeat left top; /* We used a background image making the thick border and the thin one to keep the html structure simple */ } #mainNav li a { display: block; float: left; height: 37px; font-weight: bold; line-height: 37px; text-decoration: none; color: #646464; padding: 0 20px; } #mainNav li.logout { float: right; border-left: 1px solid #ddd; border-right: none; } #mainNav li.header { float: left; padding: 10px; border-right: none; text-align: center; font-weight: bold; font-size: 20px; color: #C87C5B; } #mainNav li a:hover { background: #fdfcf6; } #mainNav li a.active, #mainNav li a.active { color: #454545; } /* Container ---------------------------------------- */ #containerHolder { background: #eee; padding: 5px; } #container { background: #fff url(../images/content.gif) repeat-y left top; border: 1px solid #ddd; width: 918px; } /* Breadcrumb ---------------------------------------- */ h2 { width: 718px; float: right; color: #646464; font-size: 16px; line-height: 16px; font-weight: bold; margin: 20px 0 0 0; padding: 0 0 10px 0; border-bottom: 1px solid #ddd; } h2 a { color: #646464; text-decoration: none; } h2 a.active { color: #c66653; } h2 a:hover { text-decoration: underline; } /* Content ---------------------------------------- */ #main { width: 700px; float: right; padding: 0 20px 0 0; } h3 { font-size: 14px; line-height: 14px; font-weight: bold; color: #5494af; padding: 0 0 0 10px; margin: 20px 0 10px; } #main table { border-top: 1px solid #ddd; width: 700px; } #main table tr td { background: #f6f6f6; padding: 0px 20px; height: 29px; line-height: 29px; border-bottom: 1px solid #ddd; } #main table tr.odd td { background: #fbfbfb; } #main table tr:hover td { background: #fdfcf6; } #main table .action { text-align: right; padding: 0 20px 0 10px; } #main table tr .action a { margin: 0 0 0 10px; text-decoration: none; color: #9b9b9b; } #main table tr:hover .action .edit { color: #c5a059; } #main table tr:hover .action .delete { color: #a02b2b; } #main table tr:hover .action .view { color: #55a34a; } #main table tr:hover .action a:hover { text-decoration: underline; } .submit { font: 11px Arial, Helvetica, sans-serif; color: #646464; width: 94px; height: 29px; cursor: pointer; border: none; font-size: 15px; font-weight: bold; background: url(../images/button-submit.gif) no-repeat left top; } #hasil { margin: 50px 0px 10px; font-size: 15px; font-weight: bold; line-height: 20px; color: #3E3E3E; padding: 110px 0px 0px 0px; } /* Footer ---------------------------------------- */ #footer { margin: 10px 0 30px 0; font-size: 11px; line-height: 11px; color: #9B9B9B; padding: 0 0 0 5px; } #footer a { color: #9B9B9B; } #footer a:hover { text-decoration: none; } .x{ vertical-align: top; }

3. Cek hasil program 
Lihat hasil program dengan menggunakan software browser seperti Mozilla Firefox. Jalankan browser yang Anda miliki dan ketik pada address url, seperti: http://localhost/nama folder/nama file.php. 

Read More

Membuat Program Penggunaan Checkbox Pada Pemrograman PHP

Kebanyakan programmer tentu tau mengenai fitur CheckBox pada pemrograman PHP. Checkbox merupakan komponen yang menampilkan kotak untuk dipilih atau dicentang (check) dari beberapa opsi yang tersedia. Pengguna dapat mencentang pilihan sebanyak opsi yang tersedia atau hanya mencentang opsi yang dipilih saja. Penggunaan checkbox biasanya terdapat pada form pendaftaran, persetujuan pada saat installasi atau yang lainnya. Jika menyetujui persyaratan yang ditetapkan, pengguna bisa mencentang checkbox yang tersedia. Untuk membuat input checkbox diperlukan beberapa perintah, seperti: tag input, type, name dan value. Berbicara mengenai checkbox, Kami ingin berbagi informasi mengenai program penggunaan checkbox pada pemrograman PHP. Berikut ini tahapan-tahapan atau cara pembuatan program tersebut: 

1. Pembuatan file baru pada Notepad++ 
Anda dapat menjalankan Notepad++ dan buat file baru dengan cara memilih File > New dan simpan dengan tipe ekstensi .php. Anda disarankan menyimpan file pada Local Disk > xampp > htdocs > buat folder baru untuk menyimpan file php. Selanjutnya buat script pemrograman PHP, berikut ini script PHP yang telah selesai dibuat.

<?php { ?><html><head> <title>Penggunaan CheckBox</title> <link href="style/style.css" rel="stylesheet" type="text/css" media="screen"/></head><body> <div id="wrapper"> <ul id="mainNav"> <li class="header">Penggunaan CheckBox Pada PHP</li> <li class="logout"><a href="#">Logout</a></li> </ul> <div id="containerHolder"> <div id="container"> <h2> <a href="#">Pilih Komedian Favorit Anda :</a> »</a></h2> <div id="main"> <?php if(isset($_GET['menu'])){ include $_GET['menu'].".php"; } ?> <form ACTION="checkbox.php" METHOD="POST" NAME="input"> <h2> <input type="checkbox" name="kom01" value="Komeng"> Komeng<br/> <input type="checkbox" name="kom02" value="Fitrop"> Fitrop<br> <input type="checkbox" name="kom03" value="Cak Lontong"> Cak Lontong<br/> <input type="checkbox" name="kom04" value="Haji Bolot"> Haji Bolot<br/><br/> <input type="submit" name="pilih" value="Pilih" class="submit"> </h2> </FORM> <div id="hasil"> <?php if (isset($_POST['pilih'])){ echo "Komedian favorit pilihan anda adalah :<br>"; if (isset($_POST['kom01'])){ echo $_POST['kom01']. "<br>"; } if (isset($_POST['kom02'])){ echo $_POST['kom02']. "<br>"; } if (isset($_POST['kom03'])){ echo $_POST['kom03']. "<br>"; } if (isset($_POST['kom04'])){ echo $_POST['kom04']. "<br>"; } } ?> </div> </div> <div class="clear"> </div> </div> </div> <p id="footer"> </p> </div> </body> </html><?php } ?>

2. Desain program 
Buat file baru pada Notepad++ dengan memilih File > New dan simpan dengan nama style.css. File style digunakan untuk mendesain tampilan file PHP agar terlihat lebih menarik. Berikut ini contoh script style.css yang telah selesai dibuat.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, normal, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remove textarea resize at Safari */ textarea { resize: none; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } /* Basic ---------------------------------------- */ .clear { clear: both; } body { background:url(../images/background.jpg); font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #646464; text-align: center; } #wrapper { text-align: left; width: 930px; margin: 20px auto; } /* Logo ---------------------------------------- */ h1 { margin: 15px 0 10px 5px; width: 225px; height: 28px; font-size: 30; } h1 a { display: block; width: 225px; height: 28px; } h1 span { display: none; } /* Main Navigation ---------------------------------------- */ #mainNav { width: 918px; height: 37px; padding: 6px; margin: 0 0 10px 0; background: url(../images/top-menu-bg.gif) no-repeat left top; /* We used a background image making the thick border and the thin one to keep the html structure simple */ } #mainNav li a { display: block; float: left; height: 37px; font-weight: bold; line-height: 37px; text-decoration: none; color: #646464; padding: 0 20px; } #mainNav li.logout { float: right; border-left: 1px solid #ddd; border-right: none; } #mainNav li.header { float: left; padding: 10px; border-right: none; text-align: center; font-weight: bold; font-size: 20px; color: #C87C5B; } #mainNav li a:hover { background: #fdfcf6; } #mainNav li a.active, #mainNav li a.active { color: #454545; } /* Container ---------------------------------------- */ #containerHolder { background: #eee; padding: 5px; } #container { background: #fff url(../images/content.gif) repeat-y left top; border: 1px solid #ddd; width: 918px; } /* Breadcrumb ---------------------------------------- */ h2 { width: 718px; float: right; color: #646464; font-size: 16px; line-height: 16px; font-weight: bold; margin: 20px 0 0 0; padding: 0 0 10px 0; border-bottom: 1px solid #ddd; } h2 a { color: #646464; text-decoration: none; } h2 a.active { color: #c66653; } h2 a:hover { text-decoration: underline; } /* Content ---------------------------------------- */ #main { width: 700px; float: right; padding: 0 20px 0 0; } h3 { font-size: 14px; line-height: 14px; font-weight: bold; color: #5494af; padding: 0 0 0 10px; margin: 20px 0 10px; } #main table { border-top: 1px solid #ddd; width: 700px; } #main table tr td { background: #f6f6f6; padding: 0px 20px; height: 29px; line-height: 29px; border-bottom: 1px solid #ddd; } #main table tr.odd td { background: #fbfbfb; } #main table tr:hover td { background: #fdfcf6; } #main table .action { text-align: right; padding: 0 20px 0 10px; } #main table tr .action a { margin: 0 0 0 10px; text-decoration: none; color: #9b9b9b; } #main table tr:hover .action .edit { color: #c5a059; } #main table tr:hover .action .delete { color: #a02b2b; } #main table tr:hover .action .view { color: #55a34a; } #main table tr:hover .action a:hover { text-decoration: underline; } .submit { font: 11px Arial, Helvetica, sans-serif; color: #646464; width: 94px; height: 29px; cursor: pointer; border: none; font-size: 15px; font-weight: bold; background: url(../images/button-submit.gif) no-repeat left top; } #hasil { margin: 50px 0px 10px; font-size: 15px; font-weight: bold; line-height: 20px; color: #3E3E3E; padding: 110px 0px 0px 0px; } /* Footer ---------------------------------------- */ #footer { margin: 10px 0 30px 0; font-size: 11px; line-height: 11px; color: #9B9B9B; padding: 0 0 0 5px; } #footer a { color: #9B9B9B; } #footer a:hover { text-decoration: none; } .x{ vertical-align: top; }

3. Jalankan hasil program 
Ketika menjalankan program, Kita perlu membuka browser dan ketik pada address url, seperti: http://localhost/nama folder/nama file.php. 

Read More

Membuat Form Login Pada Pemrograman PHP

Penggunaan form login diperlukan untuk menjaga keamanan sistem pada aplikasi maupun website yang dibuat. Form login hanya dapat diakses atau dibuka oleh pemilik, hal ini dilakukan untuk meminimilisir orang yang tidak bertanggung jawab dapat mengaksesnya. Pada form login, pengguna diminta untuk memasukan username dan password. Bila username dan password tidak sesuai maka program tidak muncul atau tampil, pengguna perlu melakukan login kembali. Terkadang untuk meningkatkan keamanan, pemilik bisa menerapkan sistem kemananan yang lebih protektif, misalnya: bila melakukan kesalahan sebanyak 3 kali, pengguna tidak dapat melakukan login hingga beberapa jam. Berbicara mengenai form login, Kami ingin berbagi informasi mengenai pembuatan form login sederhana menggunakan bahasa pemrograman PHP. Untuk lebih jelasnya, berikut ini cara pembuatan program tersebut: 

1. Pembuatan file baru 

Untuk membuat file PHP, Anda dapat menggunakan software editor text salah satunya Notepad++. Jalankan Notepad++ dan buat file baru dengan cara memilih File > New dan simpan dengan tipe ekstensi .php. Simpan file PHP pada Local Disk > xampp > htdocs > buat folder baru untuk menyimpan file php. Buat script pemrograman php seperti berikut ini. 

a. Script login.php untuk tampilan awal ketika login username dan password.

<html><head> <title>form login</title> <link href="style/style.css" rel="stylesheet" type="text/css" media="screen"/></head><body> <form action="proseslogin.php" method="post" name="form1"> <table> <tr id="header"> <td colspan="2"><h2> Login Disini</h2> </td> </tr> <tr> <td>Username</td> <td><input type="text" name="username" id="username" placeholder="username"></td> </tr> <tr> <td>Password</td> <td><input type="password" name="password" id="password" placeholder="password"></td> </tr> <tr> <td> </td> <td><input type="submit" name="Login" value="Login"> <input type="reset" name="reset" value="Reset"></td> </tr> </table> </form> </body></html>

b. Script proseslogin.php untuk menampilkan hasil login berhasil maupun login gagal.

<html><head> <title>Hasil Login</title> <link rel="stylesheet" type="text/css" href="style/style.css"> </head><body> <form action="proseslogin.php" method="post" name="form1"> <table> <tr> <td> <?php if (isset($_POST['Login'])){ $login = $_POST['username']; $pass = $_POST['password']; if ($login == "serbabebas" && $pass == "serbabebas"){ echo "<h2> Login Berhasil</h2> "; } else{ echo "<h2> Login Gagal</h2> "; } } ?> </td> </tr> </table> </form> </body></html>

2. Buat file CSS 
Desain form login menggunakan bahasa tampilan CSS. Buat file css menggunakan Notepad++ dengan memilih File > New dan simpan dengan nama style.css. Berikut ini contoh script file style.css yang telah selesai dibuat.

body{ background:url(../images/background2.png); font-family: arial; } table { width:350px; margin:100px auto; padding:20px 40px; border:1px solid #ccc; background:rgba(255, 255, 255, 0.77); border-radius: 10px; box-shadow: 0 0 10px #fff; } input[type="text"], input[type="password"]{ border:1px solid rgba(51,51,51,.5); border-radius:10px; padding: 5px; font-size: 15px; line-height: 20px; width: 100%; text-align:center; } input[type="submit"], input[type="reset"]{ margin-top: 15px; font-size: 18px; border:1px solid #000; padding:5px 10px; border:1px solid rgba(51,51,51,.5); border-radius:10px; box-shadow: 2px 1px 1px #aaa; cursor:pointer; } input[type="submit"]:hover, input[type="reset"]:hover{ background:#f4f4f4; } h2 { text-align: center; } table tr td { margin:10px 5px; padding:5px 0; line-height: 30px; }

3. Cek hasil program 
Anda dapat mengecek hasil program dengan menggunakan software browser salah satunya Mozilla Firefox. Jalankan browser dan ketik pada address url, seperti: http://localhost/nama folder/nama file.php. Pada program tersebut, pengguna diminta melakukan input username dan password. Bila data diisi dengan benar maka akan tampil laporan login berhasil. Sedangkan bila username dan password salah maka akan tampil laporan login gagal. 

Read More