Tiadakan dirimu, maka Jatidirimu akan terungkap tanpa kata-kata.

Archive for the ‘CSS’ Category

Cara membagi halaman saat mencetak dengan css html

Tips CSSJika kita mencetak sebuah halaman web yang isinya panjang, biasanya hasil cetaknya bersambung menjadi beberapa halaman yang tidak pasti bagian-bagianya. Bisa saja satu halaman terdiri dari beberapa bagian bahasan atau format yang berbeda sehingga menyulitkan kita untuk membaca ataupun mengarsipkanya.

Jika anda seorang pengembang aplikasi web, ini juga sering terjadi pada saat anda membuat laporan yang berisi sebuah daftar yang menampilkan banyak record. Jika dicetak pasti hasilnya tidak konsisten jumlahnya bisa halaman pertama 10, halaman berikutnya 12 dan seterusnya. Dan banyak lagi contoh lainya.

Untuk itu kita bisa menggunakan perintah css, agar hasil cetaknya lebih rapi dan konsiten pada setiap halamanya. Silahkan gunakan kode berikut pada halaman html/css anda.

<style type="text/css" media="print">
    .page-break  { display:block; page-break-before:always; }
</style>

Kemudian tambahkan kode berikut pada setiap bagian yang ingin dipisah halaman cetaknya.

<d/i/v class="page-break"></d/i/v>
hapus tanda / yng memisahkan kalimat div.

Dengan kode diatas otomatis pada saat sebuah halaman web kita cetak maka akan dipisah ke halaman berikutnya.

 

Semoga bermanfaat.

Zainal Hakim

Sumber

http://www.zainalhakim.web.id/posting/cara-membagi-halaman-hasil-cetak-printer-dengan-css.html

Kategori:

CSS, HTML

Mempercantik Alert JavaScript dengan Sweet Alert

Kehadiran javascript dalam dunia web programming membawa banyak sekali perubahan. Salah satu perubahan yang paling signifikan adalah ajax. Yang awalnya setiap request yang kita buat kepada server harus melalui proses reload page, sekarang kita bisa melakukannya tanpa perlu me-reload page, request seolah-olah berjalan di balik layar. Dan ini tentu saja membuat aplikasi web menjadi lebih interaktif, tidak kalah dengan aplikasi desktop mau pun mobile. Dengan hadirnya javascript pula, sekarang sangat memungkinkan sekali untuk membangun sebuah web dengan hanya satu halaman saja, atau biasa kita kenal dengan SPA (single page application), dan sudah banyak sekali framework-framework js yang hadir untuk mempermudah kita dalam membangun web berbasis SPA.

Dengan segala kekayaan fitur js, juga dengan segala kemampuan menakjubkan yang dibawanya, tetapi ada satu hal yang sedikit mengganjal. Yaitu perintah alert pada javascript yang tampilannya sangat sederhana dan klasik. Padahal alert adalah sesuatu yang penting, yang bisa kita gunakan untuk menampilkan pesan kepada user secara interaktif. Maka jika alert pada aplikasi kita tampilannya masih klasik, bisa mempengaruhi user experience secara keseluruhan terhadap aplikasi kita. Lalu, bagaimana cara mempercantik alert pada javascript? Jawabannya adalah: ada banyak. Kita bisa membuat sendiri popup menu from scratch (ngoding dari awal), atau menggunakan modal dari framework bootstrap, dan banyak sekali. Tetapi, dalam kesempatan kali ini, kita akan menggunakan sweet alert js. Perhatikan penampilan alert bawaan dari js: normal alert Dan perhatikan bagaimana alert dengan sweet alert: sweet alert

Cantik bukan?

Langsung saja…

Kita bisa melakukan instalasi sweet alert melalui tiga cara:

Melalui bower

$ bower install sweetalert

Melalui npm

$ npm install sweetalert

Manual download

  1. Download file master di https://github.com/t4t5/sweetalert/archive/master.zip
  2. Extract file tersebut.
  3. Copy folder dist ke folder project.

Setelah file css dan js sweet alert telah terdapat pada project kita, maka load kedua file tersebut dalam file html kita. Dan kita bisa menampilkan alert dari sweet alert dengan memanggil fungsi berikut: swal("Good job!", "You clicked the button!", "success"); Contoh program:

<!DOCTYPE html>
<html>
<head>
<title>Sweet Alert</title>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
<script type="text/javascript" src="dist/sweetalert.min.js"></script>
</head>
<body>
<button onclick="classic()">Normal Alert</button>
<button onclick="sweet()">Sweet Alert</button>
<script>
function normal () {
alert("Normal Alert!");
}
function sweet (){
swal("Good job!", "You clicked the button!", "success");
}
</script>
</body>
</html>

Untuk dokumentasi selengkapnya, bisa dilihat di http://t4t5.github.io/sweetalert/

Sumber = https://www.codepolitan.com/tutorial/mempercantik-alert-javascript-dengan-sweet-alert

Kategori:

CodeIgniter, CSS, JavaScript, PHP

Menampilkan Datepicker di Modal Bootstrap

ada kalanya kita menggunakan datepicker pada suat aplikasi website kita,  datepicker ini digunakan untuk menampikan tanggal. beberapa kasus yang saya temui datepicker akan berjalan normal jika diletakan pada halaman web biasa akan tetapi datepicker dari bootstrap ini tidak berjalan normal saat ada di modal bootstrap dimana posisi datepicker berada dibawah modal. contoh tampilannya seperti berikut :

untitled

bisa dilihat disitu dimana posisi datepicker ada dibawah modal, untuk mengatasi hal demikian tinggal kita ubah patch css nya, tambahkan style seperti berikut :

<style>

.datepicker{z-index:1151;}

</style>

berikut souce code menampilkan datepicker di modal bootstrap :

<!DOCTYPE html>
<html>
<head>
<title>Menampilkan Datepicker di Modal Bootstrap</title>
<link rel=”stylesheet” href=”css/bootstrap.css”>
<link rel=”stylesheet” href=”css/datepicker.css”>
http://”js/bootstrap.js”
http://”js/jquery.js”
<style>
.datepicker{z-index:1151;}
</style>

$(function(){
$(“#tanggal”).datepicker({
format:’yyyy/dd/mm’
});
});

</head>
<body>

Preview :

untitled

Sumber : https://ghantexs16.wordpress.com/2013/05/12/menampilkan-datepicker-di-modal-bootstrap/

Kategori:

CSS, PHP

Cara Menggunakan Bootstrap Datepicker 3 di Codeigniter

Kali ini saya akan sedikit membagikan ilmu bagaimana menggunakan datepicker bootstrap 3 pada codeigniter, codeigniter yang saya pakai disini adalah versi 2.2.1. kalo begitu langsung saja siapkan codeigniter yang pakai.

Disini saya menamakan folder projectnya dengan datepicker_ci lalu simpan di folder htdocs kalian.

Pertama kita siapkan terlebih dahulu pengaturan codeigniternya, apa saja yang dibutuhkan untuk membuat datepicker ini berjalan di codeigniter.

 

Buka file php autoload di folder config, lalu ubah settingannya seperti gambar dibawah.

 

Pada pengaturan diatas kita hanya menambahkan url pada helper, karena kita tidak menggunakan database jadi tidak usah menload apa-apa pada library.

Selanjutnya buka file php routes di folder config, lalu ubah settingannya seperti gambar dibawah.

 

Ubah default controllernya yang tadinya welcome menjadi datepicker, karena controller datepicker ini yang akan kita gunakan menjadi default indexnya.

Setelah itu kita siapkan file bootstrap datepickernya dan simpan di direktori kalian, contoh disini saya membuat folder assets pada struktur folder codeigniternya. Lalu simpan file datepickernya didalam folder tersebut.

Lalu setelah itu buat file php untuk controller codeigniternya lalu berinama datepicker dan simpan di folder controller codeigniternya, dan isikan script dibawah ini.

Controller : datepicker.php

01 <?php if(!defined('BASEPATH')) exit ('no direct script access allowed');
02   
03   
04   class Datepicker extends CI_Controller {
05    
06    
07    
08    public function index()  {
09    
10    
11     $this->load->view('view_datepicker');
12     
13     /*fungsi memanggil view datepicker atau tampilan
14     yang akan dipakai*/
15    
16    }
17    
18    
19   }
20   
21   
22 ?>

Selanjutnya kita buat file php untuk viewnya, berinama view_datepicker lalu masukan script pada gambar dibawah, dan sekalian kita include file bootstrap yang akan kita gunakan. Lalu simpan di folder views di codeigniternya.

View : view_datepicker.php

01 <html>
02 <head>
03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
04 <title>Bootstrap Datepicker di Codeigniter</title>
05 </head>
06
07 <!-- file bootstrap css yang digunakan-->
08
09 <link href="<?php echo base_url(); ?>assets/css/bootstrap.min.css" rel="stylesheet">
10
11 <link href="<?php echo base_url()?>assets/date_picker_bootstrap/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
12
13
14 <body>
15
16 <form name="form1" action="" method="post" enctype="multipart/form-data">
17  
18     <div class="form-group" style="margin-left:10px;">
19         <label>Datepicker</label>
20          <div class="date" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
21          <input class="form-control datepicker"  data-date-format="yyyy-mm-dd" type="text" name="tanggal" style="width:150px" >
22      </div>
23         <input type="hidden" id="dtp_input2" value=""/>
24  </div>
25     
26 </form>
27
28 </body>
29
30  <!-- jQuery Version 1.11.0 -->
31  <script src="<?php echo base_url() ?>assets/jquery-1.11.0.js"></script>
32
33
34 <!--file include Bootstrap js dan datepickerbootstrap.js-->
35
36 <script src="<?php echo base_url(); ?>assets/bootstrap.min.js"></script>
37
38 <script type="text/javascript" src="<?php echo base_url()?>assets/date_picker_bootstrap/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
39 <script type="text/javascript" src="<?php echo base_url()?>assets/date_picker_bootstrap/js/locales/bootstrap-datetimepicker.id.js"charset="UTF-8"></script>
40
41 <!-- Fungsi datepickier yang digunakan -->
42 <script type="text/javascript">
43  $('.datepicker').datetimepicker({
44         language:  'id',
45         weekStart: 1,
46         todayBtn:  1,
47   autoclose: 1,
48   todayHighlight: 1,
49   startView: 2,
50   minView: 2,
51   forceParse: 0
52     });
53 </script>
54
55 </html>

 

Jika sudah memasukan semua script yang ada pada diatas, sekarang kita coba cek dibrowser dengan membuka project yang kita buat ini.

Buka url localhost/datepicker_ci maka tampilan datepicker yang kita buat tadi akan seperti gambar dibawah.

Dan selesailah pembahasan kita kali ini, jika kalian mengikuti semua langkah diatas dengan benar maka hasilnya pasti seperti gambar diatas, Terimakasih telah berkunjung pada blog saya semog ilmu yang kita bahas kali ini bermanfaat, jika ada yang kurang paham dan ingin ditanyakan silahkan untuk menanyakannya di kolom komentar.

Sumber : http://tulisan-blog.blogspot.co.id/2015/02/cara-menggunakan-boostrap-datepicker-3.html

Kategori:

CodeIgniter, CSS, PHP