List of Blocks

This page uses a Hashtag List to show all Blocks in a Blockchain.   A Hashtag Form is shown below the Blockchain, allowing New Blocks to be added to the end.   The table is styled using Bootstrap 3 default theme classes, with a custom hash style to truncate the long values.   Hovering the cursor over any truncated value will reveal the original value.   Hovering over the Block # will reveal the Block ID used to generate the Hash.  
# Data Previous Hash Hash Action
1 Genesis 1620612922
d8880f5e20345e1f13b5d70c4b912945424bedeb796a830b9878e8432720febd
Validate
2 Does this work?
d8880f5e20345e1f13b5d70c4b912945424bedeb796a830b9878e8432720febd
73f1c88d44dc6188959d0fe63b214fe07456d220aad24d075a73e06b864ca526
Validate
3 WHOA! COOL!
73f1c88d44dc6188959d0fe63b214fe07456d220aad24d075a73e06b864ca526
28f5f026d8bb8af9bc39b2dc041053d597fe4834c8728e9ea186eab700e5da5e
Validate

Extend Latest Block:  28f5f026d8bb8af9bc39b2dc041053d597fe4834c8728e9ea186eab700e5da5e


Processed this Hashtag Markup:
<# start list for blockchain;
	sort by instance_id;
#>

<# start header #>
<table class="table table-striped table-hover">
	<thead>
	<tr>
		<th>#</th>
		<th>Data</th>
		<th>Previous Hash</th>
		<th>Hash</th>
		<th>Action</th>
	</tr>
	</thead>
	<tbody>
<# end header #>

<# start row #>
	<tr id="<# hash as html #>">
		<td title="<# id as html #>"><# instance_id #></td>
		<td><# data as html #></td>
		<td><span class="hash" title="<# prev_hash as html #>"><# prev_hash as html #></span></td>
		<td><span class="hash" title="<# hash as html #>"><# hash as html #></span></td>
		<td><a href="validate?hash=<# hash as html #>" class="label label-primary">Validate</a></td>
	</tr>
<# end row #>

<# start footer #>
	</tbody>
</table>
<# set last_block.hash to "<# hash #>"; #>
<# end footer #>

<# start no results #>
<#: no blocks found... create genesis block :#>
<# create record for "blockchain" as "genesis";
	set data to "Genesis <#[system.timestamp]#>";
	set hash to "<# genesis.id #><# genesis.data #>" as hash;
#>
<h4 class="alert alert-success text-center">Genesis Block Created Successfully!</h4>
<# set last_block.hash to "<# genesis.hash #>"; #>
<# end no results #>

<# end list #>
																		
<hr>

<# start form for blockchain; 
	set form.class to "form-inline";
	when creating set prev_hash to "<#[last_block.hash]#>";
	when creating set hash to "<# form.id #><# form.prev_hash #><# form.data #>" as hash;
	when done redirect to "/blockchain/#<# form.prev_hash #>";
#>
	<h4>Extend Latest Block: 
		<span class="label label-default hash" 
			title="<#[last_block.hash as html]#>"><#[last_block.hash as html]#></span>
	</h4>
	<div class="form-group">
		<label for="data">Data</label>
		<input type="text" <# data #> required class="form-control" maxlength="20" id="data">
	</div>
	<input type="submit" <# create button #> class="btn btn-primary" value="Add Block">
<# end form #>


The Blockchain Mini-App uses the Hashtag Markup Language to demonstrate a Blockchain.

Each Block contains a hash of the previous Block, ensuring Blocks can not be altered without invalidating all linked Blocks.  

Blocks are stored in an SQL database.   Methods are provided to create and validate Blocks.