Views - ace411/Bingo-Framework GitHub Wiki

#Views

Views are conveyed to the users of the application you intend to build; they are a juxtaposition of the data manipulated in the back-end (models) and the elegantly written front-end components which are usually stylesheets, JavaScript files, and markup. Creating views in Bingo is really easy as the framework allows you to choose between using raw PHP templates and applying Mustache syntax.

##Raw PHP

The header and footer files typed in PHP are found in the Raw directory which is found in the Views folder within the parent App directory. It is advised that you include these in your project so that you preempt repetition.

Simple Raw PHP header

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title><?php echo htmlspecialchars($title);?></title>
			<link rel="stylesheet" type="text/css" href="<?php echo htmlentities($stylesheet, ENT_QUOTES, 'UTF-8');?>">
			<link rel="stylesheet" type="text/css" href="<?php echo htmlentities($font, ENT_QUOTES, 'UTF-8');?>">
		</head>
<body>

Simple Raw PHP footer

</body>
</html>

###Templates

Using the Raw PHP though advantageous for seasoned developers might substantially increase the script bulk of projects. Raw PHP templates are saved in directories eponymous with the Controllers they are accessed from. The raw index.php template is saved in the Home directory in the Views folder and bears the same name as the Home controller directory found in the Controllers folder. The aforementioned template and others like it look like this:

<?php include $header;?>
	<header class="top-container">
		<nav class="top-container-nav">
			<?php foreach($links as $link):?>
				<a href="<?php echo htmlspecialchars($link[0]);?>" class="top-container-nav-a"><?php echo htmlspecialchars($link[1]);?></a>
			<?php endforeach;?>
		</nav>
	</header>
	<section class="container-title">
		<h1><?php echo htmlentities($short_desc);?></h1>
	</section>
	<section class="list-container-row">
		<?php foreach($plans as $plan):?>
			<li class="list-container-item">
				<button class="item-btn">
					<?php echo htmlentities($plan, ENT_QUOTES, 'UTF-8');?>
				</button>
			</li>
		<?php endforeach;?>
	</section>
<?php include $footer;?>

##Mustache templates

Mustache templates are a lot easier to create and work with. Variables and lambda functions are wrapped in mustaches '{{}}' which render them easier to implement. Mustache HTML files are saved in the Mustache directory inside the Views folder.

Sample Mustache Template

<!doctype HTML>
	<html>
		<head>
			<meta charset="utf-8">
			<title>{{title}}</title>
			<link rel="stylesheet" src="{{stylesheet}}" type="text/css">
			<link rel="stylesheet" src="{{font}}" type="text/css">
			<link rel="icon" type="image/png" href="{{favicon}}">
		</head>
		<body>
			<h1 align="center">Hello, {{firstname}}</h1>
		</body>
	</html>
⚠️ **GitHub.com Fallback** ⚠️