Membuat Bagan Alur di HTML dengan CSS

Oleh -

Selain dalam bentuk flowchart, mungkin karena malas, untuk menunjukkan alur suatu tahapan, biasanya diberikan dalam bentuk diagram sederhana seperti gambar di atas.

Jika ditampilkan dalam HTML, diagram di atas akan membutuhkan load lebih tinggi dibanding jika dibuat dengan text biasa.

Dibawah ini adalah contoh kode halaman HTML, untuk menampilkan diagram dari text dan symbol (untuk panah), dengan bentuk rounded box dengan CSS.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.tablediagram{
	border:0px;
	width: fit-content;
    margin: auto;
}

.tablediagram td{
	text-align:center;
	height:80px;
	border:0px;
}

.buttonblue{
	display:flex;
	height:100;
	justify-content:center;
	align-items: center;
	color:white;
	border:5px solid white;
	background-color:#5959ff;
	border-radius:25px;
	box-shadow: 5px 5px 5px 1px rgb(0 0 255 / 20%);
	max-width:200px;
	text-decoration:none !important;
	font-weight:bold;
}

.buttonbluearrow{
	color:red;
	font-size:xxx-large;
}
</style>
</head>
<body>
<table class="tablediagram">
<tr><td><a href="#" class="buttonblue">Ujian Kualifikasi</a></td><td><span class="buttonbluearrow">→</span></td><td><a href="#" class="buttonblue">Pengajuan Komisi Pembimbing</a></td></tr>
<tr><td colspan="2"></td><td><span class="buttonbluearrow">↓</span></td></tr>
<tr><td><a href="#" class="buttonblue">Ujian Proposal Disertasi</a></td><td><span class="buttonbluearrow">←</span></td><td><a href="#" class="buttonblue">Penyusunan Proposal Disertasi</a></td></tr>
<tr><td><span class="buttonbluearrow">↓</span></td><td colspan="2"></td></tr>
<tr><td><a href="#" class="buttonblue">Pelaksanaan Disertasi</a></td><td><span class="buttonbluearrow">→</span></td><td><a href="#" class="buttonblue">Publikasi Ilmiah dalam Seminar Nasional</a></td></tr>
<tr><td colspan="2"></td><td><span class="buttonbluearrow">↓</span></td></tr>
<tr><td><a href="#" class="buttonblue">Ujian Seminar Hasil Penelitian Disertasi</a></td><td><span class="buttonbluearrow">←</span></td><td><a href="#" class="buttonblue">Publikasi Ilmiah dalam Seminar Internasional</a></td></tr>
<tr><td><span class="buttonbluearrow">↓</span></td><td colspan="2"></td></tr>
<tr><td><a href="#" class="buttonblue">Ujian Kelayakan Disertasi</a></td><td><span class="buttonbluearrow">→</span></td><td><a href="#" class="buttonblue">Ujian Akhir Disertasi</a></td></tr>
</table>
</body>
</html>

Demo online dapat di lihat di sini.

Komentar

Posting Komentar



Postingan populer dari blog ini

Polygon Cloud Generator dengan HTML5 Canvas

Oleh -
Gambar
Masih penasaran dengan algorithma pembuatan cloud (awan) sebelumnya, penulis mencoba untuk membuat efek cloud menggunakan polygon. Ternyata hasilnya lebih bagus, dengan kualitas kecerahan yang lebih tinggi. Sama dengan kode cloud generator pada posting sebelumnya, bedanya kali ini penulis menggunakan fungsi draw polygon dan dengan menggunakan globalAlpha=0.1. Berikut ini adalah kode HTML5 Canvas implementasi algorithma di atas: <html> <head> <title>Polygon Cloud Generator</title> </head> <body> <canvas id= "myCanvas" width= "1024" height= "768" > </canvas> <script> var canvas = document.getElementById( "myCanvas" ); var num=0; var ctx = canvas.getContext( "2d" ); ctx.fillStyle = "#2196f3" ; ctx.fillRect(0,0,canvas.width,canvas.height); warna=[ "white" ]; ctx.globalAlpha = 0.1; function Menggambar() { ctx.beginPath();...
Baca selengkapnya

Eliminasi Gauss-Jordan untuk Invers Matrix dengan Java

Oleh -
Gambar
Terkait dengan posting sebelumnya tentang algorithma eliminasi Gauss-Jordan , penulis mencoba mengimplementasikannya dengan bahasa pemrograman Java. Untuk tahapan pembuatannya dapat dilihat pada video di bawah ini: Sedangkan kode Java-nya adalah sebagaimana berikut: package tutorialjava; import java.text.DecimalFormat; import java.util.Random; /** * @author Edugameapp */ public class TutorialJava { private double[][] A= new double[][]{ {0,-3,-2}, {1,-4,-2}, {-3,4,1} }; private double[][] B; public boolean cekDiagonal( int a) { if (a>10*A.length)return false ; for ( int i=0;i<A.length;i++){ if (A[i][i]==0){ Random rand= new Random(); int k=(i+rand.nextInt(A.length))%A.length; for ( int j=0;j<A[0].length;j++){ double tmp=A[i][j]; A[i][j]=A[k][j]; A[k][j]=tmp; ...
Baca selengkapnya

Perbedaan Sudut Pandang Dosen dan Karyawannya

Oleh -
Sebuah perdebatan dingin dari sisi Dosen senior dan karyawan di suatu instansi pendidikan, di mana penulis pernah bekerja di dalamnya, menggelitik penulis untuk membaginya dalam blog ini. Bukan untuk meminta pembenaran, hanya saja penulis ingin berbagi sudut pandang, yang siapa tahu berefek positif bagi pembaca. Mulanya seorang karyawan senior, mengatakan jika ada yang dari pihak Dosen yang memberi penilaian jelek terhadap pekerjaan penulis sebagai karyawan, "Jangan dianggap, sebab yang membayar kita itu Fakultas. Bukan Dosen itu". Tentu, perkataan tersebut berpengaruh dan menjadikan penulis berprinsip, "Yang penting pekerjaanku selesai". Setelah beberapa lama bekerja, tiba-tiba seorang Dosen senior berbincang dengan penulis dan berkata, "Salah satu daya tarik Fakultas adalah SDM Dosen-dosen pengajarnya, sehingga mahasiswa bersedia belajar dan menjadi mahasiswa, adalah karena adanya Dosen-dosen, dan tugas karyawan adalah membantu Dosen-dosen tersebut". Dim...
Baca selengkapnya

Membuat Kalkulator Interpolasi Bilinear dengan Javascript

Oleh -
Gambar
Dalam perhitungan numerik yang seringkali penulis lakukan, untuk keperluan interpolasi, penulis banyak kali menggunakan metode Interpolasi Biliner. Selain karena mudah dalam penggunaannya, untuk keperluan presisi, dapat dengan mengorientasikan ukuran panjang sisi grid yang kecil. Persamaan matematis Interpolasi Bilinear yang penulis implementasikan adalah sebagai berikut: Sedangkan dalam kode Javascript, untuk mempermudah perhitungan, penulis menggunakan dua kali langkah, yaitu menghitung arah horizontal dulu sebagai nilai c1 dan c2, baru menghitungnya sebagai nilai B. Langkah-langkah di atas, dapat dilihat pada video Youtube penulis di bawah ini: Sedangkan secara online kalkulator dapat dicoba dengan mengklik button dibawah ini: Demo Untuk kode Javascript dalam halaman HTML-nya adalah sebagai berikut: <html> <head> <title>Bilinear Interpolation Example</title> </head> <body> <h1>Bilinear Interpolation Calculator</h1> Coordinat po...
Baca selengkapnya

Game TicTacToe dengan Greenfoot

Oleh -
Gambar
Game Tic Tac Toe, meskipun termasuk game yang sederhanya, ternyata sulit juga untuk membuatnya. Terutama untuk memasukkan Artificial Intelligence (AI) sebagai musuh pemain. Penulis sebenarnya telah mencoba mengimplementasikan algorithma game Tic Tac Toe dengan HTML5 Canvas pada posting sebelumnya, namun disini penulis mencoba menulis ulang dengan Greenfoot, dan melakukan efisiensi penulisan kode program. Awalnya, sesuai gambar diatas dan dalam video dibawah ini, penulis membuatnya dengan Greenfoot versi 3.x, namun karena terlalu memakan banyak memori, penulis ubah ke Greenfoot versi lebih awal, yaitu Greenfoot 2.x. Sedangkan untuk kode nya dapat di download dengan link dibawah ini: Download TicTacToe.gfar Ide AI-nya cukup sederhana, yaitu komputer mencoba bertahan, dengan mencari posisi pemain dimana paling berpotensi menang, baru kemudian mencari posisi untuk dirinya sendiri untuk menang. Untuk game versi Android-nya dapat dicoba di link dibawah ini...
Baca selengkapnya

Seberapa Hebatkah Orang Dalam

Oleh -
Gambar
Ilustrasi Orang Dalam (Sumber gambar: Pixabay/mhouge) Dalam urusan pemberkasan sertifikat tanah atau semacamnya, seringkali kita menemui orang yang berani bilang "Dengan bantuan orang dalam, maka segala urusan apapun akan menjadi mudah dan murah". Biasanya, orang yang berani bilang seperti itu adalah mereka yang bekerja sebagai makelar atau calo. Kemudian bagi penulis sendiri, semenjak merasa ditipu oleh seorang 'makelar' pengurusan sertifikat tanah sebelum tulisan ini ditulis, penulis menjadi sulit mempercayai kata-kata orang yang menyebutkan orang dalam tersebut. Sehingga, jika terdapat irang yang bilang semacan itu, penulis hanya balik menantang "Coba jaman sekarang, dia berani kagak!". Alasannya, pertama, peraturan semakin ketat, seperti yang penulis posting sebelumnya, notaris pun saat tulisan ini ditulis, tidak berani untuk melakukan jalan pintas. Misalnya untuk masalah perwalian pembelian tanah waris, 3 dari 4 notaris yang penulis temu...
Baca selengkapnya

Membuktikan Hasil Pendekatan Limit Menggunakan Algebra Equation Calculator

Oleh -
Gambar
  Salah satu permasalahan dalam matematika yang sering diberikan kepada siswa sekolah tingkat menengah adalah permasalahan tentang limit. Secara konsep menyebutkan bahwa nilai dari suatu fungsi atau deret, dapat didekati melalui nilai input tertentu. Dimana kegunaannya adalah untuk mencari nilai yang hasil perhitungannya menghasilkan nilai tak tehingga, atau menghitung hasil dengan nilai input tak terhingga. Konsep ini sangat mudah dipahami, namun dalam implementasinya, terutama di lembar test ujian sangatlah berbeda. Entah karena memang sulit, atau dibuat sulit karena lebih mementingkan ego sang pembuat soal. Sampai-sampai di bimbingan belajar siswa diajari cara menghitung cepat limit, dengan trik yang menurut penulis semakin melencengkan pemahaman siswa. Algebra Equation Calculator adalah aplikasi Android buatan penulis, yang di distribusikan dibawah nama Computational Lab di Play Store. Aplikasi ini sengaja penulis buat langsung menampilkan hasil, ...
Baca selengkapnya

Afiliasi Shopee Tanpa Wajah dan Tanpa Beli Sampel Bermodal AI

Oleh -
Gambar
Setelah sekian lama berusaha menulis buku, akhirnya penulis berhasil memebuat sebuah buku yang, menurut penulis, memang layak untuk dibagikan ke publik. Buku tersebut berjudul " Rp 1.397 dari Shopee Video dengan Artificial Intelligence (AI) ", yang tidak lain adalah story book penulis dalam mencoba berafiliasi memanfaatkan video AI. Saat tulisan ini ditulis, penulis memberikan harga Rp. 7 ribu saja. Karena memang masih terdiri dari 20 halaman. Di mana planning penulis, buku ini akan penulis lengkapi seiring berjalannya waktu, dan semoga penulis bisa mendaftarkan ISBN, jika jumlahnya sudah mencapai 100 halaman. Penulis akan memberikan akses ke file asli, sehingga pembeli tidak perlu mengeluarkan uang lagi dikemudian hari jika buku ini di update. Mungkin akan timbul pertanyaan, kenapa penulis memilih menjadi afiliator yang sebelumnya adalah pemain Adsense? Intinya sederhana, penulis terpaksa harus mencari 'Adsense' baru, sebab status penulis yang sebagai tenaga  'ou...
Baca selengkapnya

Algorithma Tic Tac Toe dengan HTML5 Canvas

Oleh -
Gambar
Penasaran membuat game Tic Tac Toe, terutama tentang menambahkan kecerdasan buatan (Artificial Intelligence) untuk melawan pemain, penulis mencoba menuliskan algorithma dan memvisualisasikannya dengan HTML5 Canvas. Kode program game Tic Tac Toe dibawah ini disertai dengan interaksi mouse dan touch untuk mempermudah penggunaan. Sedangkan ide kecerdasan buatannya, komputer mencari dulu posisi terbaik untuk dirinya agar menang, baru jika tidak terpenuhi, komputer mencari posisi yang paling tepat untuk bertahan. <html> <head> <title>Tic Tac Toe</title> </head> <body> <div id= "score" style= "font-size:42px;color:#009688;width:500px;text-align:center;" ></div> <div id= "hasil" style= "font-size:42px;color:#009688;width:500px;text-align:center;" ></div> <canvas id= "myCanvas" width= "500" height= "500" > </canvas><br/> ...
Baca selengkapnya

Menggambar Lingkaran Menyala dengan Efek Shadow

Oleh -
Gambar
Fungsi bayangan ternyata merupakan salah satu hal penting dalam proses menggambar, terutama untuk menambahkan kesan elegan. Gambar di atas, adalah contoh pemanfaatan efek bayangan di HTML5 Canvas, untuk menggambar lingkaran yang seakan menyala. Dengan warna bayangan sama dengan warna lingkaran, akan dapat dihasilkan bentuk lingkaran yang futuristik. Kode di bawah ini adalah kode untuk menggambar lingkaran di atas: <html> <head> <title>Draw Circle Generator</title> </head> <body> <canvas id= "myCanvas" width= "1024" height= "768" > </canvas> <script> var canvas = document.getElementById( "myCanvas" ); var ctx = canvas.getContext( "2d" ); ctx.fillStyle = "black" ; ctx.fillRect(0,0,canvas.width,canvas.height); function Menggambar() { ctx.fillStyle= "#50575C" ; var rx=0.5*canvas.width; var ry=0.5*canvas.height; var r=...
Baca selengkapnya