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.

Data Berbasis Desa

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

Konsep manajemen data berbasis desa sebenarnya bukanlah materi yang berat untuk dicerna dan dipahami. Desa dalam konteks ini adalah sebuah ekosistem terkecil yang secara akumilatif akan membentuk sebuah kecamatan, selanjutnya kabupaten, provinsi, dan akhirnya membentuk sebuah negara. Dalam bahasan ini, saya tidak membedakan apakah elemen terkecil itu berbentuk Pemerintahan Desa, ataupun Kelurahan. Selanjutnya saya hanya akan menyebutnya sebagai Pemerintah Desa.

Pemerintahan Desa merupakan elemen terkecil dalam sistem pemerintahan di Indonesia. Data Desa harusnya juga dapat dijadikan sebagai elemen terkecil dalam struktur data nasional. Sayangnya, Struktur Data Nasional kita tidak dibentuk dengan sistem seperti itu.

Metode Pendataan berkala sebenarnya sudah tidak relevan lagi dilaksanakan di era digital seperti saat ini. Internet dapat dimanfaatkan untuk membangun sebuah struktur data realtime yang dapat berubah setiap saat. Sektor pembangunan yang perlu dipikirkan bersama untuk membangun struktur data realtime tersebut adalah penguatan di sektor infrastruktur jaringan.

Permasalahan keterbatasan akses internet di beberapa wilayah, terutama di daerah pedalaman, selalu menjadi alasan untuk masih mengalokasikan anggaran untuk sesuatu yang –sebelumnya sudah saya sebut sebagai– “Sudah Tidak Relevan”, yaitu PENDATAAN. Akhirnya, setiap Satuan Kerja Pemerintah di setiap tingkatnya, masih melaksanakan kegiatan pendataan, sensus, verifikasi, atau apapun istilahnya.

“Bahkan kegiatan pendataan yang dilakukan secara digital melalui aplikasi pendataan sekalipun, menurut saya, itu hanya sebatas digitalisasi data, dan masih belum bisa menghasilkan produk data realtime.”

ORCA TECH

Logikanya adalah, “Siapa yang lebih mengetahui jumlah anggota keluarga dalam 1 KK? Apakah Kepala Desa? atau Kepala Keluarganya?” Jika skala logika ini sedikit diperbesar, “Siapa yang lebih mengetahui jumlah KK pada suatu Desa? Apakah Camat? atau Kepala Desanya?” Sampai skala ini, kita sudah dapat melihat signifikasi permasalahan dalam data, yaitu bahwa pihak yang paling mengetahui kondisi data ril secara realtime, adalah pihak yang lebih dekat dan/atau bersentuhan langsung dengan objek data.

Hingga hari ini, saya masih dan hanya membayangkan sebuah struktur data yang terintegrasi dari elemen pemerintahan terkecil, yaitu Pemerintah Desa, dengan Pemerintah Kecamatan, yang secara komulatif selanjutnya disebut sebagai Data Kecamatan. Integrasi Data Kecamatan ini di level selanjutnya akan menjadi Data Kabupaten, Data Provinsi, dan akhirnya akan membentuk Data Nasional yang updatenya dipastikan Realtime.

Memang tidak mudah untuk membangun prototype aplikasi data yang terintegrasi dari Desa hingga Pusat seperti yang saya uraikan di atas. Tetapi melihat infrastuktur jaringan dan fasilitas koneksi internet yang sudah hampir merata hingga ke ilayah pedesaan, ORCA TECH meyakini bahwa konsep tersebut bukanlah sekedar mimpi atau hayalan belaka.

Kampanye Manajemen Data Berbasis Desa di Desa Bajuin Kecamatan Bajuin Kabupaten Tanah Laut

Dalam beberapa kesempatan ORCA TECH telah melakukan upaya untuk membangun konsep Data Berbasis Desa tersebut. Namun disadari bahwa untuk meujudkan konsep tersebut bukanlah hal mudah. diperlukan adanya dukungan dari semua pihak terkait.

Follow IG : @orcatech.co.id – Prototype Konsep Sistem Manajemen Data Berbasis Desa .
Read on IG: Orca Tech Team kembali melakukan kegiatan Kampanye “Manajemen Data Berbasis Desa”.

Protokol 3×3 Dalam Pembuatan Aplikasi

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

Sebagai perusahaan yang bergerak di bidang pembuatan aplikasi berbasis web dan android, ORCA TECH memiliki standar ideal yang kami sebut dengan istilah PROTOKOL 3×3. Aspek-aspek dalam protokol inilah yang akan akan kami bangun bersama pihak klien sebelum masuk ke pengembangan aplikasi.

Adapun aspek-aspek standar ideal dalam pengembangan aplikasi yang dibangun sebelum memulai pengembangan aplikasi terdiri dari 3 aspek, yiatu Pengguna, Sumber Daya, dan Aplikasinya sendiri. Disebut PROTOKOL 3×3 karena pada ketiga aspek standar tersebut, memiliki 3 aspek turunan yang menjelaskan lebih detail tentang standar ideal pengembangan aplikasi.

  • PROTOKOL PENGGUNA (USER)
    • Mindset
      Aspek turunan pertama, yaitu MINDSET. Mindset yang dimaksud di sini adalah sebuah pandangan atau pemikiran bahwa aplikasi dapat menjadi solusi cerdas untuk menjawab permasalahan yang selama ini dihadapi dalam pekerjaan fisik, baik kegiatan administrasi maupun pelayanan publik/konsumen secara manual/offline.
    • Komitmen
      Selanjutnya, KOMITMEN; yaitu kebersediaan pengguna (User) untuk konsisten melakukan kegiatan administrasi dan pelayanan menggunakan aplikasi yang telah tersedia.
    • Integritas
      Dan aspek turunan terakhir pada aspek PENGGUNA (USER) ini adalah aspek INTEGRITAS, yaitu menumbuhkan rasa tanggung jawab terhadap tugas dan fungsi jabatan yang secara teknis akan diatur oleh aplikasi.
  • PROTOKOL SUMBER DAYA (SOURCE)
    • Peraturan
      Aplikasi sebagai sebuah alat kerha digital harus dibangun di atas dasar peraturan yang jelas. Sehingga kegiatan administrasi dan pelayanan yang dilakukan melalui suatu aplikasi (online) tetap selaras dengan dasar peraturan yang berlaku dalam pekerjaan fisik (offline).
    • Pengalaman
      Sedangkan aspek pengalaman merupakan acuan teknis, kebiasaan, kendala yang sering dihadapi dalam pekerjaan, serta informasi lainnya yang juga biasanya terjadi dalam pekerjaan manual. Pengalaman-pengalaman ini akan menjadi dasar untuk pengembangan teknis, fungsi dan flowchart aplikasi.
    • Keahlian
      Untuk menerapkan dasar peraturan dan pengalaman tersebut ke dalam sebuah aplikasi, juga harus didukung oleh keahlian, yaitu dalam hal ini tenaga ahli yang memiliki kompetensi dalam pengembangan aplikasi.
      Pada aspek inilah ORCA TECH dapat masuk, jika klien tidak memiliki tenaga ahli yang mampu membangun aplikasi yang akan menggantikan pekerjaan administrasi dan pelayanan manual menjadi pekerjaan digital.
  • PROTOKOL APLIKASI (TOOL)
    • Mudah
      Aplikasi sebagai sebuah alat kerja, idealnya memang dibangun untuk memudahkan pekerjaan penggunanya, JUGA sekaligus memperhatikan aspek kemudahan dalam penggunaannya. Aspek mudah dan memudahkan ini adalah Misi Besar yang dibawa oleh ORCA TECH dalam pengembangan suatu aplikasi, yaitu untuk membantah pandangan mayoritas masyarakat yang mengatakan bahwa “Aplikasi itu Sulit dan menambah pekerjaan”.
    • Bermanfaat
      Apabila aspek “Mudah dan Memudahkan” di atas berorientasi pada fungsi INPUT aplikasi, maka aspek kebermanfaatan ini merupakan pertimbangan dari aspek fungsi OUTPUT aplikasi. Sebagai pengembang aplikasi berbadan hukum resmi, ORCA TECH tidak ingin menurunkan image perusahaan dengan mengembangkan Aplikasi yang tidak bermanfaat atau hanya sekedar gengsi-gensian.
    • Terintegrasi
      Akhirnya, untuk membangun sebuah aplikasi yang mampu mengolah sebuah INPUT menjadi berbagai macam jenis OUTPUT, hanya bisa terjadi jika aplikasi tersebut menerapkan aspek INTEGRASI, yaitu terbangunnya sebuah struktur data yang saling terhubung dan saling membutuhkan antara satu dengan yang lainnya. Output terakhir dari struktur data yang terintegrasi ini adalah validitas dan singkronisasi data.
      Untuk membangun Aplikasi yang Mudah dan Bermanfaat, pada akhirnya akan memerlukan Integrasi, baik antar fitur dalam aplikasi, maupun dengan aplikasi lain.

Kesimpulan

Artikel ini perlu dibaca dan dipahami bagi anda yang berminat untuk mermitra dengan ORCA TECH. Jika ada hal yang perlu untuk didiskusikan, anda dapat menulisnya di kolom komentar atau langsung menghubungi pihak ORCA TECH melalui kontak yang tersedia.

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.