workshop 4,5
This commit is contained in:
boris
31
workshop5/Views/index.phtml
Normal file
31
workshop5/Views/index.phtml
Normal 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
workshop5/Views/page1.phtml
Normal file
391
workshop5/Views/page1.phtml
Normal 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
workshop5/Views/template/footer.phtml
Normal file
23
workshop5/Views/template/footer.phtml
Normal 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>
|
||||
Reference in New Issue
Block a user