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

Apps Script untuk Cetak Sertifikat

Oleh -
Gambar
Tutorial pembuatan sertifikat menggunakan Google Docs, Sheets dan Apps Script teleh penulias buat dalam video di bawah ini: Sedangkan berikut ini adalah kode Apps Script yang penulis gunakan di dalam tutorial di atas: function onOpen() { const ui = SpreadsheetApp.getUi(); const menu = ui.createMenu("Cetak Sertifikat"); menu.addItem("Cetak Sertifikat", "generateMode"); menu.addToUi(); } function generateMode() { var idtemplate="1qseLMkdYIzmx0rhkKELF0xxlsD13CS1eCk0MlcTKt_g"; var idtarget="1ZLNksdiilEc0mQ88WOfAuU8_JcMVcO6ewXuJes-UU9I"; var ss = SpreadsheetApp.openById("1j1TArXYzRlVGvB9q7ly7NdyF-nsJcCH6RT3rOQik0yQ"); var so=ss.getSheetByName("Source"); var data=so.getRange("A1:C").getValues().map(function(row){return (row[0]!="")?row:null}).filter(function(cellData){return cellData != null;}); const docTemplate=DocumentApp.openById(idtemplate); var docTarget=DocumentApp.open...
Baca selengkapnya

Jalan-jalan ke Taman Nasional Baluran

Oleh -
Gambar
Berikut ini adalah pengalaman penulis bersepeda motor ke Taman Nasional Baluran. Yang berada di Jalan Raya Situbondo Banyuwangi km 35, Banyuputih, Situbondo, Jawa Timur. Pada tanggal 17 Februari 2018. Profile Taman Taman Baluran merupakan salah satu dari lima taman tertua Indonesia yang memiliki luas sekitar 25.000 hektar. Taman ini memiliki berbagai macam flora dan fauna. Dengan 444 spesies flora, termasuk 265 macam tanaman obat.  Untuk fauna, Taman baluran memiliki 2 macam primata yaitu long tail macaca dan black monkey, 233 spesies burung, kerbau, banteng, rusa, terumbu karang, ikan dan lain sebagainya. Sedangkan untuk object wisata sendiri, Taman Baluran memiliki Gua Jepang, padang Savanna Bekol, dan pantai Bama. Selain sebagai tempat rekreasi, taman ini cocok juga digunakan sebagai tempat untuk penelitian kalangan akademisi seperti mahasiswa, dosen, atau pihak peneliti lainnya. Dan dapat juga digunakan sebagai tempat pengambilan foto pre-wedding, s...
Baca selengkapnya

Menghapus Baris di Google Sheets yang Memiliki Sel Kosong dengan Apps Script

Oleh -
Gambar
Pastinya, input data yang dilakukan oleh pengguna, terdapat data yang kosong pada salah satu sel-nya. Hal ini biasanya karena salah input, atau memang sengaja di-input-kan oleh pengguna. Untuk mengurangi proses pengolahan, dapat dilakukan penghapusan data tersebut, dengan Apps Script yang dapat di download dengan kode seperti di bawah ini: Kode function deleteKosong() { var target = SpreadsheetApp.openById("--id Google Sheets file--"); var ss=target.getSheetByName("Data"); var data=ss.getRange("A2:G").getValues().map(function(row,index){return (row[0]!="" && row[3]=="")?index:null;}).filter(function(cellData){return cellData != null;}); for(var i=data.length-1;i>=0;i--){ ss.deleteRow(2+data[i]); } } Demo
Baca selengkapnya

Menampilkan Struktur Tabel MySQL dengan JTree

Oleh -
Gambar
Tertarik menampilkan struktur table database MySQL dalam bentuk tree, penulis melakukan percobaan memanggil database menggunakan JTree. Penggunaan JTree memang karena aplikasi yang sedang penulis bangun adalah berbasis web app, Android dan dengan back-end berupa dekstop menggunakan Java. Seperti yang telah disebutkan dalam posting-posting sebelumnya, penggunaan Java tidak lain karena penulis ingin tidak terlalu ribet masalah lisensi dikemudian hari. Diharapkan dengan pembuatan dengan platform yang mayoritas 'free', distribusi aplikasi nantinya dapat dilakukan lebih mudah dan bebas. Desain Skenario utama pembuatan back-end aplikasi penulis, adalah bagaimanapun juga database yang digunakan harus satu, dan dapat diakses baik dari sisi web, Android dan juga software. Oleh karena itu penulis menggunakan database MySQL (My-Structured Query Language), dengan menggunakan komunikasi data berupa JSON (JavaScript Object Notation), yang di akses dan di encode men...
Baca selengkapnya

Kaidah Baku untuk Konsistensi Data (PT, Tbk, Pty., & Ltd.)

Oleh -
Sebagai database engineer, penulis sempat kaget ketika mendapati banyaknya data masuk, khususnya dari mahasiswa yang mengajukan nama instansi, yang secara berulang kali menulis PT tanpa menggunakan tanda titik, untuk pengajuan suratnya. Penulis yang terbiasa dengan pemahaman lama (EYD) bahwa 'PT' harus ditulis 'PT.' akhirnya mencoba memeriksa ulang. Setelah penulis check dan berdiskusi ke salah satu AI, ternyata memang terdapat pembaharuan dan penulisan tanpa titik adalah kaidah baku modern. Konsistensi ini krusial untuk integritas database.  Konflik Aturan Bahasa dan Kebutuhan Sistem Pertama banyak yang sudah terbiasa (termasuk penulis) menambahkan titik setelah singkatan seperti 'PT.' karena dahulu aturan Ejaan Yang Disempurnakan (EYD) mengamanatkan titik pada singkatan tertentu. Namun, untuk menjaga  integritas data  dan  standardisasi  dalam sistem informasi dan dokumen hukum, kita harus berpegangan pada kaidah penulisan nama entitas yang resmi. 1. Penulisan...
Baca selengkapnya

Pengalaman Full Approved Google Adsense

Oleh -
Gambar
Setelah hampir 2 tahun lebih, akhirnya pada tanggal 2 November 2017, datang email dari Google Adsense yang menyatakan bahwa website penulis telah diterima secara penuh (full approved) seperti gambar dibawah ini: Email tersebut datang, setelah berulang kali penulis melalukan pendaftaran website dan juga melalui blog. Bagi pembaca yang belum mengetahui cara pendaftaran website tersebut adalah pendaftaran melalui menu Google Adsense->My Ads->Other Product, dan dengan memasukkan alamat website pada textfield yang disediakan. Cara ini tidak ketika ditolak penulis langsung mengirimkan ulang pengajuan, namun penulis juga memperbaiki dulu tampilan web sebelum diajukan kembali. Awal Mula Penulis telah mencoba program afiliasi Adsense semenjak tahun 2014. Saat itu penulis membuat blog, dengan content tulisan yang terkait dengan penelitian penulis. Namun karena kesibukan pekerjaan penulis saat itu, hasilnya penulis hanya dapat menelorkan beberapa tulisan saja. Dan dengan topik ...
Baca selengkapnya

Tutorial Upload File ke Google Drive dari Website

Oleh -
Panduan ini adalah hasil diskusi penulis dengan aplikasi ChatGPT  yang menjelaskan cara membuat sistem  upload  file langsung dari website Anda ke Google Drive menggunakan kombinasi  HTML/JavaScript  (Frontend),  PHP  (Proxy), dan  Google Apps Script  (Backend). Langkah 1: Siapkan Google Apps Script (Backend) Kode ini berfungsi sebagai  Backend  yang memiliki izin untuk berinteraksi langsung dengan Google Drive API. PENTING:  Ganti  "id folder"  di baris kode dengan ID folder tujuan Anda di Google Drive. Kode Apps Script ( Code.gs ) function doPost(e) { try { // Memproses data JSON yang dikirim oleh PHP Proxy const data = JSON.parse(e.postData.contents); const folderId = "id folder"; // <-- GANTI DENGAN ID FOLDER GOOGLE DRIVE ANDA // Fallback data const fileName = data.filename || "tanpa_nama"; const mimeType = data.mimeType || "application/octet-stream"; // Mendekode konten Base...
Baca selengkapnya

Kumpulan Source Code Greenfoot

Oleh -
Gambar
Overview Greenfoot adalah aplikasi berbasis Java yang cocok untuk pemula yang sedang belajar OOP Java. Dukungan image processing 2D dapat menjadi satu daya tarik utama penggunaan aplikasi ini. Sehingga selain gratis, dengan Greenfoot anda akan dapat belajar membuat algorithma pembuatan game, terutama yang berbasis game 2D. Greenfoot Sourcecode Collection adalah kumpulan source code Greenfoot yang terdiri dari 36 skenario. Beberapa scenario menunjukkan tentang bagaimana cara memvisualisasikan contoh-contoh bidang kefisikaan, seperti revolusi bulan, gravitasi, pendulum dan sebagainya. Selain itu beberapa contoh juga mengambil tujuan bagaimana cara membuat animasi 2D dengan lebih banyak menulis program, dibanding pengolahan gambar menggunakan software image processing seperti Corel Draw atau Photoshop. Dengan mempelajari source code ini diharapkan anda dapat menguasai dasar bagaimana melakukan atau menerapkan algorithma dalam bentuk kode program untuk pembuatan game 2D ...
Baca selengkapnya

Algorithma Starfield dengan HTML5 Canvas

Oleh -
Gambar
Di bawah ini adalah kode animasi starfield dengan menggunakan 800 titik. Idenya sederhana, mendeteksi posisi mouse sebagai titik tengah arah gerak, titik disebar secara random pada luasan canvas, dan digerakkan menjauhi titik tengah dengan kecepatan tertentu. Titik tidak disebar begitu saja, tetapi secara kontinyu ditambahkan ke canvas tiap lima frame. Selain itu, titik tidak digambarkan berupa titik, namun berupa garis, dengan lebar garis yang ukurannya bertambah 0.02 tiap framenya. <html> <head> <title>Starfield</title> </head> <body> <canvas id= "myCanvas" width= "1024" height= "500" > </canvas> <script> var canvas = document.getElementById( "myCanvas" ); var points=[]; var n=0; var pox=0.5*canvas.width; var poy=0.5*canvas.height; var Ro=Math.sqrt(pox*pox+poy*poy); var mousePos={x:pox,y:poy}; function getMousePos(canvas, evt){ var rect = c...
Baca selengkapnya

Jasa Penjadwalan Semester, UTS dan UAS Perguruan Tinggi menggunakan Google Sheet

Oleh -
Gambar
  I. Pendahuluan Sebagai tenaga administrasi di perguruan tinggi, pengelolaan jadwal semester yang efektif adalah kunci untuk memastikan bahwa proses akademik berjalan lancar dan efisien. Dengan banyaknya mata kuliah, dosen, mahasiswa dan ruang yang harus diatur, yang berpatokan pada pohon kurikulum, akan membutuhkan ketelitian yang tinggi dalam mengatur jadwal, agar masing-masing variabel tidak saling tumpang tindih. Dengan menggunakan tool yang tepat, pengelolaan jadwal akan lebih efisien dan dapat meningkatkan produktivitas bagi semua Sumber Daya Manusia (SDM) yang terlibat. Oleh karena itu, dalam tulisan ini penulis menawarkan jasa penjadwalan semester perguruan tinggi menggunakan Google Sheet, sebuah tool yang mudah digunakan dan dapat diakses dari mana saja. Dengan menggunakan jasa penjadwalan ini, penulis berharap perencanaan jadwal perguruan tinggi dapat dilakukan lebih cepat dan efektif. II. Kelebihan Berikut ini kelebihan penggunaan Google Sheet sebagai aplikasi penjadwal...
Baca selengkapnya