Berkas PSD Desain Nokia X

nokia-x-wireframe

berkas PSD saya buka melalui GIMP

 

Bisa dibilang sedang marak berita mengenai Nokia X, produk terbaru dari nokia yang berbasis Android AOSP. Kemarin saya sempat mencari berkas desain untuk menampilkan tangkapan layar aplikasi yang saya buat pada perangkat Nokia X. Secara kebetulan saya menemukan satu Desain Kit Nokia X dalam bentuk berkas PSD pada website deviantart. Pada berkas yang dilampirkan di website pembuatnya, tersedia tiga warna yaitu hijau, merah dan kuning. Jika tertarik, anda bisa mengunduhnya dengan mengklik gambar di bawah ini.

pratampil dari website pembuat di deviantart

Iklan

Palet Warna untuk Nokia X Tiles

nokia-x-tiles-palette

Setelah update firmware untuk Nokia X (versi 11.1.1) ada beberapa pembaruan, salah satunya ada fasilitas untuk mengubah warna latar ikon dari aplikasi yang terpasang. Sebelumnya setiap aplikasi yang terpasang di Nokia X memiliki warna latar biru tua (#124191) dan tidak dapat di ubah. Bagi teman-teman yang ingin membuat ikon aplikasi untuk Nokia X bisa mengunduh palet warna yang saya buat. Agar warna latar ikon yang dibuat mendukung warna latar dari Nokia X Tiles. Palet warna tersedia dalam ekstensi .svg dan .gpl (dapat digunakan untuk gimp dan inkscape). bisa diunduh

di Sini

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

Desain Kartu Nama (svg)

silver-maroon
Ini adalah desain kartu nama yang saya buat menggunakan aplikasi Inkscape di Blankon Linux. Memang tidak sebagus desainer profesional karena saya memang sudah lama tidak berkecimpung di dunia desain mendesain :). beberapa informasi tentang desain kartu nama ini:
Fonta: Sansation
Ikon: MFG Labs
Warna latar belakang: #cccccc
Warna fonta:#800000, #333333

Unduh berkas di sini

Pagination dan Searcing menggunakan PHP, Jquery, dan Twitter Bootstrap

Tutorial ini adalah pengembangan dari artikel sebelumnya. Jika kemarin kita belajar melakukan proses CRUD ke database MySQL menggunakan PHP dan Jquery. Maka, artikel ini menambahkan fungsi pencarian (searching) dan pembagian data yang ditampilkan tiap halaman(pagination). Bagi yang masih bingung langsung saja kita mulai tutorial ini sambil dipahami tahap demi tahap.

Baca lebih lanjut

Membuat fungsi koneksi untuk dua database dengan PHP

Setelah berhasil membuat fungsi koneksi database pada artikel sebelumnya. Kali ini kita akan mengembangkan fungsi yang sebelumnya telah dibuat sehingga dapat melakukan koneksi dengan dua database. Cara kerjanya sama, hanya saja kita akan membuat fungsi baru untuk koneksi ke database kedua.

Langkah 1

pertama-tama buat database pada MySQL atau phpMyAdmin dengan nama latihan_db1 untuk database pertama dan latihan_db2 untuk databse kedua, kemudian buat tabel dengan field seperti di bawah ini dan isikan dengan beberapa data.

koneksi-dua-database-3

koneksi-dua-database-4

Langkah 2

pada folder root webserver anda (bisa www/htdocs/html) buat folder baru dengan nama bebas, misal : latdb2 kemudian buat file

koneksi-dua-database

konfigurasi.php

<?php
define('DB1_NAMA', 'latihan_db1'); // sesuaikan dengan nama database pertama anda
define('DB1_USER', 'root'); // sesuaikan dengan nama pengguna database pertama anda
define('DB1_PASSWORD', 'password'); // sesuaikan dengan kata sandi database pertama anda
define('DB1_HOST', 'localhost'); // ganti jika letak database mysql di komputer lain

define('DB2_NAMA', 'latihan_db2'); // sesuaikan dengan nama database kedua anda
define('DB2_USER', 'root'); // sesuaikan dengan nama pengguna database kedua anda
define('DB2_PASSWORD', 'password'); // sesuaikan dengan kata sandi database kedua anda
define('DB2_HOST', 'localhost'); // ganti jika letak database mysql di komputer lain

// mengambil alamat direktori tempat berkas konfigurasi.php disimpan
define('ABSPATH', dirname(__FILE__).'/');

// memanggil berkas fungsi.php
require ABSPATH.'fungsi.php';
?>

fungsi.php

<?php
// fungsi untuk melakukan koneksi ke database mysql pertama
function koneksi1_buka() {
	mysql_select_db(DB1_NAMA,mysql_connect(DB1_HOST,DB1_USER,DB1_PASSWORD));
}

// fungsi untuk menutup koneksi ke database mysql pertama
function koneksi1_tutup() {
	mysql_close(mysql_connect(DB1_HOST,DB1_USER,DB1_PASSWORD));
}
// fungsi untuk melakukan koneksi ke database mysql kedua
function koneksi2_buka() {
	mysql_select_db(DB2_NAMA,mysql_connect(DB2_HOST,DB2_USER,DB2_PASSWORD));
}

// fungsi untuk menutup koneksi ke database mysql kedua
function koneksi2_tutup() {
	mysql_close(mysql_connect(DB2_HOST,DB2_USER,DB2_PASSWORD));
}
?>

index.php

<?php
	// memanggil berkas konfigurasi.php
	require 'konfigurasi.php';
?>
<h3>Data dari database pertama</h3>
<table border="1">
	<tr>
		<td>Nama</td>
		<td>Tempat Lahir</td>
		<td>Tanggal Lahir</td>
	</tr>
	<?php
	// membuka koneksi dengan database pertama
	koneksi1_buka();
	$query = mysql_query("SELECT * FROM biodata");
	while($data=mysql_fetch_array($query)) {
	?>
	<tr>
		<td><?php echo $data['nama']?></td>
		<td><?php echo $data['tmp_lahir']?></td>
		<td><?php echo $data['tgl_lahir']?></td>
	</tr>
	<?php
		}
		// menutup koneksi dengan database pertama
		koneksi1_tutup();
	 ?>
</table>
<h3>Data dari database kedua</h3>
<table border="1">
	<tr>
		<td>Nama</td>
		<td>Tempat Lahir</td>
		<td>Tanggal Lahir</td>
	</tr>
	<?php
	// membuka koneksi dengan database kedua
	koneksi2_buka();
	$query = mysql_query("SELECT * FROM biodata");
	while($data=mysql_fetch_array($query)) {
	?>
	<tr>
		<td><?php echo $data['nama']?></td>
		<td><?php echo $data['tmp_lahir']?></td>
		<td><?php echo $data['tgl_lahir']?></td>
	</tr>
	<?php
		}
		// menutup koneksi dengan database kedua
		koneksi2_tutup();
	 ?>
</table>
<?php

?>

Langkah 3

Pada browser favorit Anda ketikkan alamat http://localhost/nama_direktori, karena saya menggunakan direktori arifnd/latdb2 maka saya mengetikkan alamat http://localhost/latdb2 maka akan tampil seperti gambar di bawah ini

koneksi-dua-database-2

Unduh kode: koneksi-dua-database.zip