backup
This commit is contained in:
boris
20
php-s1/workshop5/Views/calculator.phtml
Executable file
20
php-s1/workshop5/Views/calculator.phtml
Executable file
@@ -0,0 +1,20 @@
|
||||
<?php require('template/header.phtml') ?>
|
||||
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST">
|
||||
<div class="form-row align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="visually-hidden" for="exp">Expression</label>
|
||||
<div class="input-group mb-2">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">Exp</div>
|
||||
</div>
|
||||
<input class="form-control" id="exp" placeholder="Expression" type="text" name="expression" value="<?php if(isset($_POST['expression'])) echo $_POST['expression'] ?>"/>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<input class="btn btn-primary" type="submit" value="Submit" name="submit" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<?php if(isset($view->result)) : ?>
|
||||
<p><?php echo $view->result; ?></p>
|
||||
<?php endif; ?>
|
||||
<?php require('template/footer.phtml') ?>
|
||||
31
php-s1/workshop5/Views/index.phtml
Executable file
31
php-s1/workshop5/Views/index.phtml
Executable file
@@ -0,0 +1,31 @@
|
||||
<?php require('template/header.phtml') ?>
|
||||
|
||||
<h2>Welcome to the web-site </h2>
|
||||
|
||||
<h3>A template for web-site development using the <i>Model-View-Controller</i> design pattern and <a href="https://getbootstrap.com/docs/5.2/getting-started/introduction/"><i>Bootstrap</i></a>.</h3>
|
||||
<p>The <i>Views/template</i> directory contains a <i>header.phtml</i> and a <i>footer.phtml</i> which should be included on every new page generated.
|
||||
To add additional pages just edit the file <i>header.phtml</i> to add the extra link and then add a new <i>Controller (pageN.php)</i> and a new <i>View (pageN.phtml)</i>, for each page required.</p>
|
||||
<p>The <i>Model</i> code files are placed in the <i>Models</i> directory.</p>
|
||||
<p>Do not change any of the css files in the <i>css</i> directory unless you know what you are doing!</p>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
|
||||
<?php require('template/footer.phtml') ?>
|
||||
391
php-s1/workshop5/Views/page1.phtml
Executable file
391
php-s1/workshop5/Views/page1.phtml
Executable file
@@ -0,0 +1,391 @@
|
||||
<?php require('template/header.phtml') ?>
|
||||
|
||||
<h2>Welcome to Page1</h2>
|
||||
|
||||
Samples from the<a class="d-flex align-items-center" href="https://getbootstrap.com/docs/5.0/examples/cheatsheet/"> cheat sheet</a>
|
||||
|
||||
<article class="my-3" id="tables">
|
||||
<div class="bd-heading align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>Tables</h3>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bd-example">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table table-dark table-borderless">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Class</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Default</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
|
||||
<tr class="table-primary">
|
||||
<th scope="row">Primary</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr class="table-secondary">
|
||||
<th scope="row">Secondary</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr class="table-success">
|
||||
<th scope="row">Success</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr class="table-danger">
|
||||
<th scope="row">Danger</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr class="table-warning">
|
||||
<th scope="row">Warning</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr class="table-info">
|
||||
<th scope="row">Info</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr class="table-light">
|
||||
<th scope="row">Light</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr class="table-dark">
|
||||
<th scope="row">Dark</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<table class="table table-sm table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="my-3" id="figures">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>Figures</h3>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bd-example">
|
||||
<figure class="figure">
|
||||
<svg class="bd-placeholder-img figure-img img-fluid rounded" width="400" height="300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 400x300" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">400x300</text></svg>
|
||||
|
||||
<figcaption class="figure-caption">A caption for the above image.</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section id="forms">
|
||||
<h2 class="fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Forms</h2>
|
||||
|
||||
<article class="my-3" id="overview">
|
||||
<div class="bd-heading align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>Overview</h3>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputEmail1" class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
|
||||
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputPassword1" class="form-label">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1">
|
||||
</div>
|
||||
<div class="mb-3 form-check">
|
||||
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
||||
<label class="form-check-label" for="exampleCheck1">Check me out</label>
|
||||
</div>
|
||||
<fieldset class="mb-3">
|
||||
<legend>Radios buttons</legend>
|
||||
<div class="form-check">
|
||||
<input type="radio" name="radios" class="form-check-input" id="exampleRadio1">
|
||||
<label class="form-check-label" for="exampleRadio1">Default radio</label>
|
||||
</div>
|
||||
<div class="mb-3 form-check">
|
||||
<input type="radio" name="radios" class="form-check-input" id="exampleRadio2">
|
||||
<label class="form-check-label" for="exampleRadio2">Another radio</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="customFile">Upload</label>
|
||||
<input type="file" class="form-control" id="customFile">
|
||||
</div>
|
||||
<div class="mb-3 form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
|
||||
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="customRange3" class="form-label">Example range</label>
|
||||
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="my-3" id="disabled-forms">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>Disabled forms</h3>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<fieldset disabled aria-label="Disabled fieldset example">
|
||||
<div class="mb-3">
|
||||
<label for="disabledTextInput" class="form-label">Disabled input</label>
|
||||
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="disabledSelect" class="form-label">Disabled select menu</label>
|
||||
<select id="disabledSelect" class="form-select">
|
||||
<option>Disabled select</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
|
||||
<label class="form-check-label" for="disabledFieldsetCheck">
|
||||
Can't check this
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<fieldset class="mb-3">
|
||||
<legend>Disabled radios buttons</legend>
|
||||
<div class="form-check">
|
||||
<input type="radio" name="radios" class="form-check-input" id="disabledRadio1" disabled>
|
||||
<label class="form-check-label" for="disabledRadio1">Disabled radio</label>
|
||||
</div>
|
||||
<div class="mb-3 form-check">
|
||||
<input type="radio" name="radios" class="form-check-input" id="disabledRadio2" disabled>
|
||||
<label class="form-check-label" for="disabledRadio2">Another radio</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="disabledCustomFile">Upload</label>
|
||||
<input type="file" class="form-control" id="disabledCustomFile" disabled>
|
||||
</div>
|
||||
<div class="mb-3 form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="disabledSwitchCheckChecked" checked disabled>
|
||||
<label class="form-check-label" for="disabledSwitchCheckChecked">Disabled checked switch checkbox input</label>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="disabledRange" class="form-label">Disabled range</label>
|
||||
<input type="range" class="form-range" min="0" max="5" step="0.5" id="disabledRange">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="my-3" id="sizing">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>Sizing</h3>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bd-example">
|
||||
<div class="mb-3">
|
||||
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<input type="file" class="form-control form-control-lg" aria-label="Large file input example">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="mb-3">
|
||||
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<input type="file" class="form-control form-control-sm" aria-label="Small file input example">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="my-3" id="input-group">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>Input group</h3>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bd-example">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="basic-addon1">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
|
||||
<span class="input-group-text" id="basic-addon2">@example.com</span>
|
||||
</div>
|
||||
<label for="basic-url" class="form-label">Your vanity URL</label>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
|
||||
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">$</span>
|
||||
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">With textarea</span>
|
||||
<textarea class="form-control" aria-label="With textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="my-3" id="floating-labels">
|
||||
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
||||
<h3>Floating labels</h3>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bd-example">
|
||||
<form>
|
||||
<div class="form-floating mb-3">
|
||||
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
|
||||
<label for="floatingInput">Email address</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
|
||||
<label for="floatingPassword">Password</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<?php require('template/footer.phtml') ?>
|
||||
23
php-s1/workshop5/Views/template/footer.phtml
Executable file
23
php-s1/workshop5/Views/template/footer.phtml
Executable file
@@ -0,0 +1,23 @@
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
|
||||
<footer class="footer fixed-bottom mt-auto py-3 bg-light">
|
||||
<div class="container">
|
||||
<span class="text-muted">Web-site development using the MVC design pattern and the Bootstrap CSS framework.</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
73
php-s1/workshop5/Views/template/header.phtml
Executable file
73
php-s1/workshop5/Views/template/header.phtml
Executable file
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
|
||||
|
||||
<link href="/css/my-style.css" rel="stylesheet">
|
||||
|
||||
<title>Server-Side Programming - <?php echo $view->pageTitle; ?></title>
|
||||
</head>
|
||||
|
||||
|
||||
<body class="d-flex flex-column h-100">
|
||||
|
||||
<!--<body role=""document"> -->
|
||||
|
||||
|
||||
<header>
|
||||
<!-- Fixed navbar -->
|
||||
<nav class="m-2 border-dark rounded navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Workshop 5</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="index.php">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="page1.php">Page1</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="calculator.php">Calculator</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex" role="search">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
<!-- Begin page content -->
|
||||
<main class="flex-shrink-0">
|
||||
|
||||
<div class="container mt-5 pt-5">
|
||||
<div class="row">
|
||||
<div id="title">
|
||||
<img class="m-1" src="images/new_uos_logo.jpg" alt="Salford University" />
|
||||
<h1><?php echo $view->pageTitle ?> </h1>
|
||||
|
||||
<!-- https://getbootstrap.com/docs/5.2/examples/sticky-footer-navbar/ -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<section id="content" class="col-xs-6 col-sm-9 col-md-10">
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user