Search for:

Bagaimana Cara Membuat Zebra Striped Table

APPKALSEL.com | Developer Aplikasi Kalimantan Selatan | Assalamu’alaikum Wr.Wb.

Zebra Striped Table adalah tampilan tabel yang memiliki warna baris silih berganti. Tujuan dari konsep desain tabel dengan warna baris yang silih berganti ini adalah untuk memudahkan pengguna menyusuri data pada setiap baris hingga jauh ke sisi kanan tabel tanpa melenceng ke baris di atas atau di bawahnya.

<table>
	<thead>
		<tr>
			<td>Kolom 1</td>
			<td>Kolom 2</td>
			<td>Kolom 3</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1.</td>
			<td>Baris Pertama Kolom 2</td>
			<td>Baris Pertama Kolom 3</td>
		</tr>
		<tr>
			<td>2.</td>
			<td>Baris Kedua Kolom 2</td>
			<td>Baris Kedua Kolom 3</td>
		</tr>
		<tr>
			<td>3.</td>
			<td>Baris Ketiga Kolom 2</td>
			<td>Baris Ketiga Kolom 3</td>
		</tr>
	</tbody>
</table>
table zebra
Gambar 1. Tampilan HTML

Untuk membuat tampilan tabel dengan warna baris silih berganti (Zebra Striped Table), anda hanya tinggal menambahkan beberapa baris styling CSS.

/* CSS: Tabel Zebra Style */
table tbody tr:nth-child(even){
	background: #CCCCCC; /* = Kita mencoba menggunakan kode warna Abu-abu */
}

Implementasi

Penerapan Trik CSS Membuat Tabel Bermotif Zebra ini dapat dilihat di Link DEMO. Anda juga dapat mencoba sendiri Trik CSS Membuat Tabel Bermotif Zebra ini dengan mengunduh Source Code di Link DOWNLOAD

DEMO
DOWNLOAD

Untuk membuat Tampilan (User Interface) yang lebih menarik pada Trik CSS Membuat Tabel Bermotif Zebra (Zebra Striped Table) ini, anda dapat memainkan Trik CSS sesuai keinginan anda. Untuk referensi, kami juga membagikan beberapa Trik CSS yang mungkin menarik untuk anda.

Penjelasan

Maaf! Saya tidak menberikan penjelasan secara detail tentang Trik CSS Membuat Tabel Bermotif Zebra (Zebra Striped Table) ini. Kita dapat membahasnya sama-sama di Kolom Komentar.

Bagaimana Cara Membuat Background Video

APPKALSEL.com | Developer Aplikasi Kalimantan Selatan | Assalamu’alaikum Wr.Wb.

Cara membuat background video di halaman website atau aplikasi berbasis web, sedikit berbeda dengan membuat background warna atau image. Membuat background video tidak menggunakan style=”background” seperti yang biasa digunakan untuk membuat background warna atau gambar (image URL).

<!-- Background Warna (Merah) -->
<div style="background: #FF0000;">
    <div>Konten</div>
</div>
<!-- Background Image -->
<div style="background: url(nama-file.png);">
    <div>Konten</div>
</div>

Untuk membuat Background video kita menggunakan Tag <video></video>. 

<video autoplay muted loop >
	<source src="video.mp4" type="video/mp4">
</video>

Kita berikat sedikit sentuhan CSS untuk Tag <video></video> tersebut

video{
	right: 0;
	bottom: 0;
	min-width: 100%; 
	min-height: 100%;
}

Implementasi

Penerapan Trik CSS Membuat Background Video ini dapat dilihat di Link DEMO. Anda juga dapat mencoba sendiri Trik CSS Membuat Background Video ini dengan mengunduh Source Code di Link DOWNLOAD

DEMO
DOWNLOAD

Untuk membuat Tampilan (User Interface) yang lebih menarik pada Trik CSS Membuat Background Video ini, anda dapat memainkan Trik CSS sesuai keinginan anda. Untuk referensi, kami juga membagikan beberapa Trik CSS yang mungkin menarik untuk anda.

Penjelasan

Maaf! Saya tidak menberikan penjelasan secara detail tentang Trik CSS Membuat Background Video ini. Kita dapat membahasnya sama-sama di Kolom Komentar.

Bagaimana Cara Menampilkan Password

APPKALSEL.com | Developer Aplikasi Kalimantan Selatan | Assalamu’alaikum Wr.Wb.

Form Input dengan Type=”password” memang dibuat untuk menyembunyikan password. Namun dalam beberapa keadaan, Pengguna (User) boleh merasa kurang yakin dengan password yang telah dia tulis. Dalam kasus seperti ini, maka diperlukan opsi untuk menampilkan password bagi Pengguna (User). Bukan untuk melemahkan aspek keamanan (security) atau membuka privasi Pengguna (User), –karena keamanan dari teks password adalah tanggung jawab Pengguna (User)–, melainkan untuk mengatasi masalah di sisi Pengguna (User) yang merasa kurang yakin dengan password yang telah dia tulis tersebut.

“Atas dasar itu pula, pada hampir semua Aplikasi yang telah dikembangkan oleh ORCA TECH selalu menerapkan Trik Javascript ini di halaman login Aplikasi”.

<!-- Bagaimana Cara Menampilkan Password -->
<form>
<input type="password" name="password" />
</form>

Javascript yang digunakan dalam Trik ini memanfaatkan Input Type=”checkbox” dengan class=”show-password”. Jika Input Checkbox ini dicentang, maka dia akan mengganti Tipe=”password” menjadi “text” pada Input dengan Class=”password”.

Untuk menjalankan logika tersebut di atas, maka kita perlu sedikit memodifikasi Form Input dengan menambahkan Class=”password” pada Form Input Password, dan Class=”show-password” pada Form Input Checkbox, seperti berikut: 

<!-- Bagaimana Cara Menampilkan Password -->
<form>
     <input type="password" name="password" class="password" />
     <input type="checkbox" class="show-password" id="show-password">
</form>

Langkah selanjutnya, untuk menjalankan Trik Javascript Menampilkan Password ini, adalah menambahkan beberapa baris kode Javascript seperti berikut.

<script type="text/javascript">
$(document).ready(function(){		
	$('.show-password').click(function(){
		if($(this).is(':checked')){
			$('.password').attr('type','text');
		}else{
			$('.password').attr('type','password');
		}
	});
});
</script>

Implementasi

Penerapan Trik Javascript Menampilkan Password ini dapat dilihat di Link DEMO. Anda juga dapat mencoba sendiri Trik Javascript Menampilkan Password ini dengan mengunduh Source Code di Link DOWNLOAD

DEMO
DOWNLOAD

Untuk membuat Tampilan (User Interface) yang lebih menarik pada Trik Javascript Menampilkan Password ini, anda dapat memainkan Trik CSS sesuai keinginan anda. Untuk referensi, kami juga membagikan beberapa Trik CSS yang mungkin menarik untuk anda.

Penjelasan

Maaf! Saya tidak menberikan penjelasan secara detail tentang Trik Javascript Menampilkan Password ini. Kita dapat membahasnya sama-sama di Kolom Komentar.