Fungsi Page Break pada HTML untuk Print Preview

page break

Pada minggu kemarin saya memiliki masalah dalam melakukan pencetakan laporan dari aplikasi website yang saya bangun, Bagaimann caranya agar data yang saya cetak bisa dibagi perhalaman, setelah berselancar di internet saya menemukan solusi penggunaan Page Break sebagai css style pada html. saya baru tahu ada properti ini pada css. berikut ini contoh kode penggunaan Page Break.

<html>
<head>
<title>CSS - Page Break</title>
<body bgcolor="#ffffff">
<center>
Halaman 1
<div style="page-break-before:always;">
Halaman 2 </div>
<div style="page-break-after:always;">
Halaman 3 </div>
Gunakan print preview untuk melihat hasilnya
</center>
</body>
</html>

page-break-before berarti page break akan diaplikasikan sebelum tag div sehingga teks Halaman 2 akan berada pada halaman yang terpisah, sedangkan page-break-after berarti Page Break akan diaplikasikan setelah tag div sehingga tulisan “Gunakan print preview untuk melihat hasilnya” berada pada halaman tersendiri.
sumber:

W3Schools

Auto Scroll Down pada Android TextView

Beberapa hari kemarin saya sedang membuat sebuah antarmuka aplikasi Android yang salah satu komponenya berfungsi sebagai log dari proses serta peringatan. Komponen yang saya gunakan adalah TextView dan ScrollView, namun ada problem yang saya temui yaitu bagaimana caranya agar teks yang ditampilkan adalah teks terakhir atau bisa dikatakan ScrollView tadi menampilkan TextView yang paling bawah. Setelah beberapa saat berselancar di Google saya menemukan solusi dari web Stack Overflow.  Berikut ini beberapa potongan tampilan Layout dan kode dari program yang saya buat

potongan kode pada berkas activity_main.xml

    <ScrollView
        android:id="@+id/log_sv"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <TextView
            android:id="@+id/log_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textAppearance="?android:attr/textAppearanceSmall" />
    </ScrollView>

potongan kode pada berkas MainActivity.java

		//inisialisasi komponen
		txServer = (EditText) findViewById(R.id.server);
		tvLog = (TextView) findViewById(R.id.log_text);

		// menambahkan teks ke dalam TextView tanpa menghapus teks sebelumnya
		tvLog.append("tampilkan pesan kesalahan\n");

		// otomatis melakukan scroll ke bawah
		svLog.fullScroll(View.FOCUS_DOWN);

Tampilan layar dari percobaan aplikasi saya.

auto-scroll

Menjalankan SpeedTest di Terminal Linux

Kebiasaan yang umum dilakukan ketika pertama kali mendapatkan koneksi internet adalah mengukur kecepatan koneksi internet tersebut. Cara paling mudah adalah dengan membuka web speedtest.net. Tapi, bagaimana jika kita sedang berada pada mode terminal di Linux atau sedang melakukan koneksi ke server dengan ssh? Matt Martz membuat sebuah skrip menggunakan bahasa pemrograman Python yang berfungsi melakukan pengukuran kecepatan koneksi internet seperti pada web speedtest.net. Berikut ini cara pemasangan dan penggunaan skrip speedtest-cli.

Pemasangan

Ada beberapa cara pemasangan skrip ini namun saya lebih suka mengunduh skrip ini sebagai berkas yang berdiri sendiri dan sewaktu-waktu dapat dihapus tanpa meninggalkan bekas pada direktori lain. Pada terminal jalankan perintah.

wget -O speedtest-cli https://raw.github.com/sivel/speedtest-cli/master/speedtest_cli.py
chmod +x speedtest-cli

atau

curl -o speedtest-cli https://raw.github.com/sivel/speedtest-cli/master/speedtest_cli.py
chmod +x speedtest-cli

Penggunaan
pastikan berada pada direktori tempat mengunduh berkas speedtest-cli kemudian jalankan perintah.

./speedtest-cli

maka hasilnya akan seperti ini

Retrieving speedtest.net configuration...
Retrieving speedtest.net server list...
Testing from PT Telkom Indonesia...
Selecting best server based on latency...
Hosted by Telekomunikasi Indonesia (Surabaya) [4.68 km]: 70.131 ms
Testing download speed........................................
Download: 1.03 Mbits/s
Testing upload speed..................................................
Upload: 0.26 Mbits/s

jika ingin menggunakan server lain maka jalankan perintah.

./speedtest-cli --list

Setelah menuntukan kode server tujuan lanjutkan dengan menjalankan perintah

./speedtest-cli --server NOMOR_SERVER

Referensi:

speedtest-cli

Mengubah Ikon Aplikasi dari Proyek Android

Artikel kali ini mengambil kasus ketika kita terlanjur menggunakan ikon sementara pada saat memulai proyek Android dan ingin menggantinya saat proyek sedang berlangsung atau ketika telah selesai. Sebenarnya cara ini bisa dilakukan secara manual. Namun, tetap saja merepotkan dikarenakan kita harus mengubah ikon sebanyak 4 kali pada folder drawable yang tersedia (mdpi, hdpi, xhdpi,xxhdpi). Berikut ini cara mengubah ikon aplikasi menggunakan Android Icon Generator:

1. Klik kanan proyek yang diinginkan pada Package Exploler atau Project Exploler, kemudian pilih menu New > Other. Pada kotak dialog New pilih Android > Android Icon Set.

android-icon-set

2. Pada kotak dialog Create Asset Set pilih Launcer Icon. pastikan nama proyek dan nama berkas ikon yang akan diubah sudah benar. Kemudian tekan Next.

launcher-icon-set

3. Lakukan perubahan seperti pada saat pertama kali anda membuat proyek Android. Setelah selesai tekan Finish.

 alt=

Mencoba Firefox OS Simulator

Mungkin banyak yang telah tahu tentang Firefox OS. Sistem operasi untuk perangkat bergerak sebagai alternatif sistem operasi yang sudah ada seperti Android, IOS, Windows Phone, dll. Artikel kali ini kita akan mencoba untuk memasang Firefox OS Simulator. Firefox OS Simulator adalah plugins untuk browser Firefox sehingga kita bisa mencoba pengalaman menggunakan Firefox OS, meski tidak sepenuhnya mirip, kita masih bisa membuat dan mencoba Firefox OS dan aplikasinya. Berikut ini adalah langkah-langkah untuk mencoba firefox OS di komputer:

1. Unduh browser Firefox pada alamat getfirefox.com lalu pasang pada komputer.

jika anda menggnakan Linux silahkan mengikuti panduan dibawah ini
pada saat tulisan ini dibuat, versi terakhir firefox adalah 2.7. langkah-langkah pemasangan sebagai berikut:
1. buka terminal.
2. unduh berkas Firefox dengan mengetikkan perintah di bawah ini lalu tekan enter.
32bit

wget ftp://ftp.mozilla.org/pub/mozilla.org/firefox/releases/27.0/linux-i686/en-US/firefox-27.0.tar.bz2

64bit

wget ftp://ftp.mozilla.org/pub/mozilla.org/firefox/releases/27.0/linux-x86_64/en-US/firefox-27.0.tar.bz2

3. ekstrak berkas yang telah berhasil diunduh

tar -xjvf firefox-27.0.tar.bz2

4. hapus berkas /opt/firefox jika ada

sudo rm -r /opt/firefox*

5 . salin berkas firefox kedalam direktori /opt/firefox27

sudo mv firefox /opt/firefox27

6. buat link menuju direktori /usr/bin agar firefox lebih mudah dijalankan

sudo ln -s /opt/firefox27/firefox /usr/bin/firefox

7. Jalankan firefox dengan mengetikkan peritah ‘firefox’ pada terminal

2. Buka browser Firefox dan ketikkan alamat https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/, lalu pilih tombol Install Firefox OS 1.2 Simulator (stable) untuk memulai mengunduh plugins. Anda juga boleh mecoba versi 1.3 yang belum stabil. jika ada dialog peringatan pilih Install Now.

Firefox OS App Manager Add-ons 2014-03-28 19-37-58 2014-03-28 19-38-00 Screenshot 2014-03-28 19-56-50 2014-03-28 19-56-52

3. Jika sudah selesai buka menu tools > App Manager atau ketikkan pada url bar about:app-manager. Kemudian tekan Firefox OS 1.2 untuk menjalankan simulator.

App Manager 2014-03-28 19-57-46 2014-03-28 19-57-48

4. Di bawah ini adalah tangkapan layar untuk App Manager dan Firefox OS yang berhasil dijalankan.

App Manager 2014-03-28 20-01-42 2014-03-28 20-01-44

Firefox OS Simulator 2014-03-28 20-00-35 2014-03-28 20-00-37 Firefox OS Simulator 2014-03-28 20-00-21 2014-03-28 20-00-23

sumber:
Firefox OS Simulator
Using the App Manager
Install Firefox 27 in Linux Mint 16

Mencetak area tertentu pada web dengan JQuery.PrintArea

Pada tutorial kali ini kita akan memanfaatkan plugin Jquery.PrintArea untuk mencetak area tertentu pada aplikasi yang telah kita buat. Berikut ini langkah-langkahnya.

Langkah 1: Mempersiapkan Kebutuhan

  1. Buat folder printarea pada folder root webserver
  2. Unduh JQuery di sini
  3. Unduh JQuery.PrintArea di sini
  4. Unduh bootstrap.min.css di sini
  5. Simpan semua berkas yang sudah di unduh dalam folder printarea

Langkah 2: Membuat berkas yang dibutuhkan

index.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>JQuery Print Area</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link href="bootstrap.min.css" rel="stylesheet" media="screen">
	
	<!-- css yang digunakan ketika dalam mode screen -->
	<link href="style.css" rel="stylesheet" media="screen">
	
	<!-- ss yang digunakan tampilkan ketika dalam mode print -->
	<link href="print.css" rel="stylesheet" media="print">
	
	<script src="jquery-1.8.3.min.js"></script>
	<script src="jquery.PrintArea.js"></script>
	<script>
		(function($) {
			// fungsi dijalankan setelah seluruh dokumen ditampilkan
			$(document).ready(function(e) {
				
				// aksi ketika tombol cetak ditekan
				$("#cetak").bind("click", function(event) {
					// cetak data pada area <div id="#data-mahasiswa"></div>
					$('#data-mahasiswa').printArea();
				});
			});
		}) (jQuery);
	</script>
</head>

<body>

<div class="navbar navbar-static-top">
	<div class="navbar-inner">
		<div class="container">
			<a class="brand" href="http://umsida.ac.id">Univ. Muhammadiyah Sidoarjo</a>
		</div>
	</div>
</div>

<div class="container">
	<div class="row">

		<h3>
			Daftar Mahasiswa
			<button id="cetak" class="btn pull-right">Cetak</button>
		</h3>
		
		<div id="data-mahasiswa">
		
		<!-- tampilkan ketika dalam mode print -->
		<div class="title">
			<center>
				DAFTAR MAHASISWA<br/>
				FAKULTAS TEKNIK<br/>
				UNIVERSITAS MUHAMMADIYAH SIDOARJO
			</center>
		</div>
		
		<table class="table table-condensed table-bordered table-hover" cellpadding="0" cellspacing="0">
			<thead>
			<tr>
				<th width="2%">#</th>
				<th width="12%">NIM</th>
				<th width="20%">Nama</th>
				<th>Alamat</th>
				<th width="12%">Kelas</th>
				<th width="12%">Status</th>
				<th width="9%" class="action"></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1. </td>
				<td>08.10802.00234</td>
				<td>Ari Effendi</td>
				<td>Gedangan</td>
				<td>E Sore</td>
				<td>Aktif</td>
				<!-- sembunyikan ketika dalam mode print -->
				<td class="action">
					<a href="#" class="btn btn-mini">Ubah</a>
					<a href="#" class="btn btn-mini">Hapus</a>
				</td>
			</tr>
		</tbody>
		</table>		
		
		</div>
	</div>
</div>

</body>
</html>

style.css


/* sembunyikan judul */
.title {
	display: none;
}

print.css


/* menyembunyikan tombol aksi */
.action {
	display: none;
}

/* memberikan border pada tabel */
.table { border-right: 1px solid black; border-bottom: 1px solid black; }
.table th, .table td { border-left: 1px solid black; border-top: 1px solid black; padding: 3px; font-size: 12px}

Langkah 3: Menguji Aplikasi

Buka browser kemudian ketikkan pada addressbar localhost/printarea/, tekan tombol cetak. Jika berhasil akan tampil kotak print dialog.

print-area-1

print-area-2

Unduh Kode

Membuat Signed APK Melalui Eclipse

Salah satu cara untuk mempublikasikan aplikasi Android yang telah kita buat adalah dengan mengunggahnya pada Google Play. Namun, sebelum aplikasi Android yang berekstensi .apk dapat diunggah, kita harus terlebih dahulu memberikan signing key. Berikut ini cara untuk mempersiapkan aplikasi Android kita agar dapat diunggah di Google Play melalui editor Eclipse.

  1. Pilih salah satu aplikasi dalam tab Project Exploler.
  2. Buka menu File -> Export.
  3. Pada dialog Export pilih Android -> Export Android Aplication, tekan tombol Next.
  4. Jika nama project sudah benar silahkan tekan Next, jika belum pilih project dari daftar dengan menekan tombol Browse.
  5. Isi baris Location dengan folder tempat kita akan menyimpan berkas keystore, dengan cara menekan tombol Browse. Lanjutkan dengan mengisi Password dan ulangi sekali lagi untuk konfirmasi. Tekan tombol Next untuk melanjutkan.
  6. Kemudian isikan beberapa baris informasi, satu keystore dapat berisi beberapa key, jadi untuk baris Alias kita bisa mengisikan dengan nama aplikasi Android. isi Password dan ulangi sekali lagi untuk konfirmasi, bisa sama dengan password keystore atau berbeda. Untuk baris Validity adalah lama berlaku key, dari Eclipse menyarankan 25 tahun. Setelah informasi yang lain sudah kita lengkapi tekan tombol Next.
  7. Pilih destinasi untuk menyimpan berkas .apk setelah itu tekan tombol Finish. Berkas .apk inilah yang akan kita unggah ke Google Play.

Catatan:
- pastikan tanggal sistem sesuai, karena itu akan mempengaruhi masa berlaku key yang kita buat.