Now that we have a fair understanding of HTML and CSS, we will build an attractive homepage, which will be linked to by a successful login. We will begin by creating a file named homepage.php. This will be linked to in the header() line of the file that validates login information. We will change this line to:
header(“Location: homepage.php”);
Now, an important note. PHP files do not only display PHP, they can also output HTML code. There are two important differences:
1. PHP files cannot be previewed by opening the PHP file in your browser. Attempting this will output the plain text of the file, rather than outputting HTML. However, loading this file from a server will display normally, but the PHP script itself is hidden.
2. Only a PHP file allows the embedding of PHP script in the document. This is THE most important attribute of a PHP file. It allows the PHP, HTML, and JavaScript to work together almost seamlessly based on server data.
This being said, we will continue as normal. This example does not actually use the PHP tags, but we will use them in a later PHP section. Here is how we end up, explained by comments:
<!DOCTYPE html>
<!-- the document type— this is an HTML document -->
<html>
<head>
<meta charset=“UTF-8”>
<title>Homepage</title>
<!-- Now we add some other useful resources -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap—This is a powerful resource; it contains responsive CSS classes in the file below, as well as other JavaScript plugins. This is going to be used to make pages look nice, so be sure to download it from getbootstrap.com or source it from maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css, with only minor changes to the URL (change css to js). You can, of course, write your own CSS code, but this makes things much easier. -->
<link href="bootstrap-4.4.1.css" rel="stylesheet">
<!-- jQuery— depends on your file path; you will need to download jQuery for this, as it includes much of the JavaScript capabilities we will use. jQuery can be downloaded from jQuery.com. An alternative is to source this script from another site. Adjust the src to the path of your jQuery file. -->
<script src="jquery-3.4.1.min.js"></script>
<!-- Bootstrap's JavaScript; Popper can be alternately sourced from https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js -->
<script src="popper.min.js"></script>
<script src="bootstrap-4.4.1.js"></script>
<style>
//this is the embedded representation of a normal linked stylesheet
body {
background-color: lightgray;
font-family: Avenir;
}
#mainContent, #sideContent, #title, footer {
//apply these effects to both elements
background-color: #5D5D5D;
//use a color ID rather than a preset
}
.light {
background-color: #B3B3B3;
}
</style>
</head>
<body>
<!-- Now we begin the actual displayed content, using Bootstrap columns as the main arrangement, with a navbar at the top -->
nav class="navbar navbar-expand-lg navbar-light bg-light col-xl-12" id="homeNavbar">
<a class="navbar-brand" href="somewhere_important">Big Button</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="somewhere">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="somewhere">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="somewhere">Item 3</a>
</li>
</ul>
</div>
</nav>
<!-- In short, this outputs a light gray navbar at the top of the page, containing alarge link, then a series of smaller ones -->
<div class="row">
<!-- A Bootstrap grid layout; in col-1, the number specifies the width in twelfths of the screen width. The order of the columns determines their layout: to move the extra content to the left, merely move it to after the main column in the code. -->
<div class="col-3">
<div class="container" id="sideContent">
<h1>Extra Content</h1>
<br>
<p>Item 1</p>
<button class="btn btn-outline-info" id="item1" onClick="location.assign('somewhere_else.php');">Item 1</button>
<!-- the 'btn-outline-*' class dynamically adjusts the background color of the button when the user hovers over it -->
<br>
<p>Item 2</p>
<button class="btn btn-outline-info" id="item2" onClick="location.assign('somewhere.php');">Item 2</button>
<!-- Recall that the onClick event is used by a <button> for redirection -->
<br>
<p>Item 3</p>
<button class="btn btn-outline-info" id="item3" onClick="location.assign('somewhere_else_still.php');">Item 3</button>
<hr>
<p>separate Item</p>
<button class="btn btn-outline-info" id="separateItem" onClick="location.assign('somewhere_else_again.php');">Separate Item</button>
<br>
</div>
<div class="col-9">
<div class="container" id="mainContent">
<div class="jumbotron" id="title">
<h1 class="display-4">Big Title!</h1>
<p class="lead">A smaller subtitle</p>
</div>
<!-- A jumbotron is a large, standout area, often at the top of a page -->
<p>This is an introductory paragraph.</p>
<!-- Now we use a table to organize the rest of the content -->
<table>
<tbody>
<tr>
<td>
<div class="light rounded">
<h5>A section heading</h5>
<p>A section description</p>
</div>
</td>
<td>
<div class="light rounded">
<h5>A section heading</h5>
<p>A section description</p>
<a href="#" class="btn btn-outline-info">Go Somewhere</a>
</div>
</td>
</tr>
<tr>
<td>
<div class="light rounded">
<h5>A section heading</h5>
<p>A section description</p>
<a href="#" class="btn btn-outline-info">Go Somewhere Else</a>
</div>
</td>
<td>
<div class="light rounded">
<h5>A section heading</h5>
<p>A section description</p>
<a href="#" class="btn btn-outline-info">Go Somewhere Else Still (maybe you-know-what?)</a>
</div>
</td>
</tr>
<tr>
<td>
<div class="light rounded">
<h5>A section heading</h5>
<p>A section description</p>
<a href="#" class="btn btn-outline-info">Go To A Different Place</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<footer>Contact me at: <a href="http://www.minecaptain.com" class="btn btn-primary btn-outline-secondary">minecaptain.com</a>
<br>
<p><strong>Designed By:</strong>YOU</p>
</footer>
</body>
</html>
That was pretty long; if you need any clarification, don't hesitate to tell me!
Next, we will begin discussing JavaScript and some of the amazing things it can do.
__RESOURCES__
http://www.minecaptain.com —The registration page is a way to contact me! Just click the icon in the bottom right corner.
A blank PHP file —Build your own!
NOTE: I will no longer attach HTML files, as their capabilities are limited without the PHP tags.
Komentarze