Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

MENAMBAH LOGO/ICON PADA TITLE WEBSITE

Buat apa sih icon pada title bar?
Ya biar icon nya bukan logo xampp aja, ganati pakai logo sendiri.



Untuk menambahkanya cuku menyematkan code berikut:

<link rel="shortcut icon" src="gambar untuk icon bar">
Letakkan code tersebut di antara tag HEAD.

contoh:

<!DOCTYPE html>
<html>
<head>
 <title>Upload File</title>
 <link rel="shortcut icon" href="file/instagram_PNG16.png">
</head>
<body>
</body>
</html>

dalam code diatas, gambar berada di dalam folder file dengan nama instagram_PNG16.png, forder file dalam folder yang sama.
Jika gambar berada dalam satu folder dengan file html, makan di dalam href ditulis nama gambarnya saja, nama gambar harus beserta extension nya.


MEMBUAT POPUP MENGGUNAKAN HTML DAN CSS


Jika biasanya popup dibuat menggunakan jQuery kali ini saya akan membuat popup dengan css.
berikut source code nya:


<!DOCTYPE html>
<html>
<head>
 <title></title>
<style>
 #button {margin: 5% auto; width: auto; text-align: center;}
 #button a {
  width: auto;
  height: 30px;
  vertical-align: middle;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid transparent;
 }

 /* Jendela Pop Up */
 #popup {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0,0,0,.7);
  top: 0;
  left: 0;
  z-index: 9999;
  visibility: hidden;
 }
 #window {
  width: 400px;
  height: 100px;
  background: #fff;
  border-radius: 10px;
  position: relative;
  padding: 10px;
  text-align: center;
  margin: 15% auto;
 }
 #window span {
  margin: 30px 0 0 0;
  font-size: 40px;
  font-weight: bold;
 }
 /* Button Close */
 #close-button {
  width: 6%;
  height: 20%;
  line-height: 23px;
  background: #000;
  border-radius: 50%;
  border: 3px solid #fff;
  display: block;
  text-align: center;
  color: #fff;
  text-decoration: none;
  position: absolute;
  top: -10px;
  right: -10px; 
 }

 /* Memunculkan Jendela Pop Up*/
 #popup:target {
  visibility: visible;
 }
</style>
</head>
<body>
 <div id="button"><a href="#popup">Coba Klik</a></div>
    
    <div id="popup">
     <div id="window">
         <a href="#" id="close-button" title="Close">X</a>
            <span>Ini contoh popup</span>
        </div>
    </div>
</body>
</html>



MEMBUAT TABEL MENGGUNAKAN BOOTSTRAP

Untuk membuat tabel dengan bootstrap sangat mudah , yakni dengan memanggil class-class yang terdapat dalam bootstrap.
Untuk membuat table standart / biasa kita hanya perlu memanggil class .table, contoh implementasinya sebagai berikut

<table class="table">
 <thead>
  <th>No</th>
  <th>NIM</th>
  <th>NAMA</th>
 </thead>
 <tr>
  <td>1</td>
  <td>2013141516</td>
  <td>Azmil</td>
 </tr>
 <tr>
  <td>2</td>
  <td>2013141517</td>
  <td>Ibnu</td>
 </tr>
 <tr>
  <td>3</td>
  <td>Syaifulloh</td>
  <td>2013141518</td>
 </tr>
</table>

Hasilnya:

Untuk membuat table belang_belang (striped) cukup menambahkan .table-striped setelah .table

<table class="table table-striped">

Ada juga untuk memberi border pada table ,cukup mengganti table-striped menjadi table-bordered
table-striped
table-bordered
Ada lagi untuk membuat tabel memilliki efek hover, ketika  berada diletakan pada row table makan akan berubah warnanya. Caranya tinggal merubah .table bordered menjadi .table-hover.

Nah coba kita mengkombinasikan semuanya

<table class="table table-striped table-bordered table-hover">
 <thead>
  <th>No</th>
  <th>NIM</th>
  <th>NAMA</th>
 </thead>
 <tr>
  <td>1</td>
  <td>2013141516</td>
  <td>Azmil</td>
 </tr>
 <tr>
  <td>2</td>
  <td>2013141517</td>
  <td>Ibnu</td>
 </tr>
 <tr>
  <td>3</td>
  <td>Syaifulloh</td>
  <td>2013141518</td>
 </tr>
</table>



dan untu memberi warna pada table, di dalam bootstrap sudah disediakan beberapa warna, dan kita cukup memanggil classnya saja. berikut warna yang disediakan
.active .success .info .warning . danger

Contoh implementasinya sebagai berikut:

<table class="table table-bordered table-hover">
 <thead>
  <th>No</th>
  <th>NIM</th>
  <th>NAMA</th>
 </thead>
 <tr class="active">
  <td>1</td>
  <td>2013141516</td>
  <td>Azmil</td>
 </tr>
 <tr calss="info">
  <td>2</td>
  <td>2013141517</td>
  <td>Ibnu</td>
 </tr>
 <tr class="warning">
  <td>3</td>
  <td>Syaifulloh</td>
  <td>2013141518</td>
 </tr>
</table>


MEMBUAT MENU DROPDOWN SEDERHANA DENGAN HTML DAN CSS


Menu DropDown merupakan sebuah menu navigasi yang berisikan link-link yang ditampikan menurunatau kebawah jika cursor diarahkan ke menu tersebut, dan jika menu tersebut di klik makaakan mengarah ke halaman web lalin.

Berikut source code untuk mebuat menu DropDown:

index.html
style.css


pastikan kedua file tersebut di dalam satu folder yang sama.
Kalo bener, hasilnya akan seperti berikut:

MEMBUAT FORM DI CODEIGNITER


Ok kali ini coba membuat form d framework Codeigniter. Disini daya menggunkan Codeigniter 3, kalo belum punya silahkan download sendiri di sini.

Langsung saja kita buat.. Pertama buant controller buat form yang akan kita buat.
ketikan syntax berikut. application/controller/cal.php

cal.php
<?php if(!defined('BASEPATH')) exit('No direct script access alowed');
class Cal extends CI_Controller 
{
 function __construct()
 {
  parent :: __construct();
  $this->load->helper('url');
 }
 function index(){
  $this->load->view('calform',$data);
 }
}

kemudian buat view nya. aplication/view/calform.php





<!DOCTYPE html>

<html>

<head>

 <title></title>

</head>

<body>

<div style="border:1px solid #000; width:450px;padding:20px;margin:auto;">

<center><h1>Kalkulator</h1></center><hr><br>

<form action="<?php echo site_url('cal/hitung')?>" method="post">

 <input type="text" name="v1" value="<?php echo $v1?>">

 <select name="pilih">

  <option value="+">+</option>

  <option value="-">-</option>

  <option value="*">*</option>

  <option value="/">/</option>

 </select>

 <input type="text" name="v2" value="<?php echo $v2?>">

 <input type="submit" value="Hitung">

</form>

<br><br>

Hasil = <?php echo $hasil ?>

<p><br>Page rendering in {elapsed_time} s</p>

</div>

</body>

</html>


Selanjutnya coba jalanin, pasti error dah.



Tapi tenang itu belun selesai. Coba tambahin source code berikut di cal.php, tepatnya di function index()




function index(){

 $data['hasil']=0;

 $data['v1']="";

 $data['v2']="";

 $data['pilih']="+";

 $this->load->view('calform',$data);

}




Nah bisa kan, tapi belung bisa dihitung karena fungsi untuk menghitungnya belum dibut. Coba aja kalo gak percaya....
Gak bisa kan. Nah sekarang kita buat fungsi untuk menghitung nya.
sisipkan syntax berikut di file cal.php, tepatnya dibawah function index()




<?php if(!defined('BASEPATH')) exit('No direct script access alowed');

class Cal extends CI_Controller

{

 

 function __construct()

 {

  parent :: __construct();

  $this->load->helper('url');

 }

 function index(){

  $data['hasil']=0;

  $data['v1']="";

  $data['v2']="";

  $data['pilih']="+";

  $this->load->view('calform',$data);

 }

 function hitung(){

  $data['v1']=$this->input->post('v1');

  $data['v2']=$this->input->post('v2');

  $data['pilih']=$this->input->post('pilih'); 

  if($data['pilih']=="+"){

   $data['hasil']=$data['v1'] + $data['v2'];

  }

  elseif($data['pilih']=="-"){

   $data['hasil']=$data['v1'] - $data['v2'];

  }

  elseif($data['pilih']=="*"){

   $data['hasil']=$data['v1'] * $data['v2'];

  }

  elseif($data['pilih']=="/"){

   $data['hasil']=$data['v1'] / $data['v2'];

  }

  $this->load->view('calform',$data);

 }

}


Nah sekarang kita coba :




Jadi sih, tapi pas dihitung select nya kok jadi "+" bukanya "*". Untuk mengatasi hal tersebut, ambahkan syntax berikut di calform.php, tepatnya si tag option .


<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<div style="border:1px solid #000; width:450px;padding:20px;margin:auto;">
<center><h1>Kalkulator</h1></center><hr><br>
<form action="<?php echo site_url('cal/hitung')?>" method="post">
 <input type="text" name="v1" value="<?php echo $v1?>">
 <select name="pilih">
  <option value="+" <?php if($pilih=="+") echo "selected";?>>+</option>
  <option value="-" <?php if($pilih=="-") echo "selected";?>>-</option>
  <option value="*" <?php if($pilih=="*") echo "selected";?>>*</option>
  <option value="/" <?php if($pilih=="/") echo "selected";?>>/</option>
 </select>
 <input type="text" name="v2" value="<?php echo $v2?>">
 <input type="submit" value="Hitung">
</form>
<br><br>
Hasil = <?php echo $hasil ?>
<p><br>Page rendering in {elapsed_time} s</p>
</div>
</body>
</html>





ok form kita sudah selesai.
Mudah kan???
Semoga bermanfaat :)