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

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

Kode Apps Script MailApp untuk Form Mengirimkan Email

Oleh -
Gambar
Terkadang kita membutuhkan untuk mengirimkan email kepada pengguna web site secara langsung, tanpa harus membuka email itu sendiri. Untuk web apps yang dibangun menggunakan Apps Script, sangat dimudahkan, dengan menggunakan fungsi MailApp untuk mengirimkan email menggunakan akun Google kita. Maka, berikut ini ada video demo bagaimana membuat form sederhana, yang berfungsi untuk mengirimkan email ke pengguna secara langsung, tanpa harus membuka email. Demo Kode file .gs function processEmailToUser(recipient,subject,pesan) { var datum={}; var bool=sendEmailToUser(recipient,subject,pesan); if(bool){ datum["status"]=1; }else{ datum["status"]=0; datum["error"]="Gagal mengirimkan email"; } return datum; } function sendEmailToUser(recipient,subjecto,pesan) { try { MailApp.sendEmail({ to: recipient, subject: subjecto, htmlBody: pesan }); return true; } catch (e) { return false; } } file .html      func...
Baca selengkapnya

Apps Script untuk Mengirimkan Notifikasi Approval

Oleh -
Gambar
Berikut ini kode Apps Script untuk mengirimkan email approval berdasarkan input dari pengguna: Kode function onOpen() { const ui = SpreadsheetApp.getUi(); const menu = ui.createMenu("Administrasi"); menu.addItem("Kirim Email Approval", "openFormEmail"); menu.addToUi(); } function openFormEmail() { var target = SpreadsheetApp.openById("--ID Sheet--"); var ss=target.getSheetByName("Instansi"); ss.getRange("A2:F").getValues().map(function(row,index){ if(row[0]!="" && row[0]!="Passed"){ var subject="Pengajuan Instansi "+row[3]+" "+row[0]; var pesan="Yth. "+row[2]+"<br/><br/>Terkait pengajuan nama instansi dengan:<br/><br/>"; pesan+="Nama: "+row[3]+"<br/>"; pesan+="Alamat: "+row[4]+"<br/><br/>"; if(row[0]=="Approved"){ ...
Baca selengkapnya

Ketika Pengelola Basis Data Terabaikan

Oleh -
Gambar
Dalam dunia administrasi, terdapat lapisan yang sering kali tidak terlihat, yaitu pengelolaan basis data. Penulis, sebagai pengelola basis data tempat dimana penulis bekerja sebagai outsourcing, adalah salah satu dari yang tidak terlihat tersebut. Pekerjaan penulis mungkin tidak se-glamor pekerjaan administrasi yang berhadapan langsung dengan mahasiswa, tetapi penulis yakin peran penulis sangat krusial dalam memastikan kelancaran operasional institusi. Di usia yang telah matang, dan mulai membusuk, penulis hanya menginginkan lingkungan kerja yang kondusif, di mana kontribusi penulis dihargai. Namun, kenyataannya, penulis merasa bahwa upaya penulis dalam membangun dan memelihara sistem basis data yang efisien, yang meringankan beban administrasi rekan kerja dan mempermudah mahasiswa, justru malah mendapatkan apresiasi yang tidak layak. Acara-acara kebersamaan, seperti makan-makan yang seharusnya menjadi momen untuk mempererat hubungan antar rekan kerja, justru menjadi ajang pengucilan p...
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

TPlanning 3.1 untuk Optimasi Dosis Paparan Radioterapi

Oleh -
Gambar
TPlanning 3.1 adalah aplikasi android yang dapat digunakan sebagai media untuk optimasi dosis paparan radioterapi. Fiturnya yang mudah digunakan, memungkinkan aplikasi ini dapat digunakan berbagai lapisan masyarakat, terutama pihak medis, seperti mahasiswa PT (Perguruan Tinggi) yang belajar di bidang minat radiologi atau semacamnya. Dengan pemakaian TPlanning 3.1 untuk perencanaan penyinaran, baik itu untuk skala praktikum ataupun dilapangan yang sesungguhnya, pengguna akan lebih mudah menentukan area, besar dan arah sudut penyinaran terbaik. Sehingga proses penyinaran dapat dilakukan dengan sudut beam yang optimal dan aman. TPlanning 3.1 Latar Belakang Dalam Radioterapi, terdapat tahapan proses Treatment Planning, yaitu perencanaan dan penentuan besar sudut-sudut Beam yang akan diimplementasikan ke kanker/tumor. Penentuan arah penyinaran tersebut mengacu pada prinsip memaksimalkan dosis paparan yang diterima kanker/tumor, dan harus meminimalkan dosis paparan y...
Baca selengkapnya

Menyikapi Ucapan AI Pejabat

Oleh -
Beberapa tahun belakangan, ketika tulisan ini ditulis, topik Kecerdasan Buatan (AI) memang sedang naik daun di Indonesia. Dari obrolan rekan kerja, hingga diskusi di ruang rapat, AI menjadi perbincangan hangat. Bahkan, tidak ketinggalan, para pejabat publik pun semakin sering melontarkan wacana seputar teknologi canggih ini. Fenomena ini tentu menarik untuk disimak. Di satu sisi, kita patut mengapresiasi bahwa AI, dengan segala potensinya, memang layak mendapatkan perhatian serius dari pemerintah. Yang konon katanya, AI digadang-gadang mampu mendongkrak pertumbuhan ekonomi, meningkatkan efisiensi, dan bahkan menciptakan inovasi di berbagai sektor. Padahal kalau kita telaah lagi, di sisi lain, AI justru akan berpotensi mengambil banyak lapangan pekerjaan. Lalu apakah kita harus terpukau dengan jargon-jargon AI yang dilontarkan, terutama oleh pejabat? Pemahaman Ketertarikan para pejabat terhadap AI bisa jadi hanya merupakan respon terhadap tren global atau bahkan upaya untuk menunjukkan ...
Baca selengkapnya

Algorithma Bilangan Prima dengan Javascript

Oleh -
Gambar
Untuk belajar pemrograman tingkat dasar, Javascript dapat digunakan untuk mengimplementasikan perhitungan sederhana. Di bawah ini adalah contoh kode Javascript untuk mencari deret bilangan prima sampai angka yang diinputkan. Selain kode berisi algorithma bagaimana mendeteksi bilangan prima, kode javascript juga berisi cara mendeteksi input berupa bilangan angka atau tidak. <html> <head> <title>Prime Algorithm</title> </head> <body> Input : <input type= "text" id= "input" /><button type= "button" onclick= "CalcPrime()" >Calculate</button><br/><br/> Hasil : <span id= "hasil" ></span> <script> function CalcPrime() { var a=document.getElementById( "input" ).value; document.getElementById( "hasil" ).innerHTML= "" ; if (!isNaN(a) && a>=0){ for (i=2;i<a;i++){ var ketemu= false ...
Baca selengkapnya

Copy Paste di Website atau Blog

Oleh -
Gambar
"Copy paste" merupakan hal yang salah dan umum dilakukan oleh pengguna internet untuk mengisi blog atau website-nya sendiri. Banyak para pemilik website atau blog, mereka mengambil tulisan dari sumber lain, dan kemudian memajangnya sebagai konten mereka, baik tanpa link referensi, ataupun tidak. Karena bagaimanapun juga praktek copy paste adalah "plagiatisme", dan termasuk pelanggaran hak cipta. Dari dulu, penulis sangat berhati-hati masalah plagiatisme. Sampai-sampai untuk gambar yang dipajang dalam artikel penulis, penulis lebih memilih menggambarnya sendiri, dibanding mencomot dari sumber lain. Untung saat tulisan ini ditulis, telah banyak situs penyedia gambar yang free attribution, seperti Pixabay. Sehingga untuk gambar ilustrasi, penulis lebih banyak mengambil dari situs-situs tersebut, yang konon katanya seluruh gambar dapat digunakan secara "gratis", baik untuk kepentingan komersil atau bukan. Tulisan ini adalah bentuk kekecewaan p...
Baca selengkapnya