I have been meaning to post a tutorial on how I built my first website at tealsparrow.com using nothing but PHP, HTML, and CSS. Hand coding the global element HTML and making sure it is the same on all pages by hand is an absolute nightmare, and using JS to insert it would be frustrating as well. PHP is the best solution, and I have been working on hand-coding this as a part of my portfolio website.
I am using methods that I have used for other class and personal projects, but have been struggling to refine it to work on a website with a lot more pages than just the pages shown in the navigation bar. So far, there has been absolutely no JS, although that may change when I need to implement a mobile-friendly navigation system. However, I recently did a complete rehaul of the file structure and folder structure so that I could put project pages in a folder together while still allowing the global element files to not be duplicated. Global files include (nav, head, header, footer) and widget files (featured projects, contact information insert).
(The desktop.ini file is generated by VScode, as far as I am aware, so ignore that file.)
The index file is a redirect file that navigates the user to the index page of the “home” folder, for reasons caused by my intricate inter-linking system.
Before I had all of the page files in the root folder directly, and this worked fine. However, this became difficult to work with when I realized that I needed to have pages for each individual portfolio item in a subfolder, but that any references to global elements in those page files to other pages would just BREAK if I tried that.
Now that I have fixed the issue, here is my projects subfolder:
The projects folder index file PHP looks like this:
<?php
$pageTitle = "Projects";
$pageDescription = "Lillian Putzer's web development and design projects.";
$pageStyleSheet = "projects.css";
$pageKeywords = "home, portfolio, web development, web design";
$pageRobots = "INDEX, FOLlOW";
$pageAuthor = "Lillian Putzer";
$pageUpdated = "2/28/2023";
$pageAttributionCredits = "../credits/other.php";
?>
<!DOCTYPE html>
<html>
<?php include "../widgets/head.php"; ?>
<body>
<?php include "../widgets/header.php"; ?>
<h2>Projects</h2>
<?php include "projects-content.php" ?>
<?php include "../widgets/contact-insert.php" ?>
<?php include "../widgets/footer.php" ?>
</body></html>
Which looks fantastic as I have it right now, but since the PHP includes have to include relative links that navigate UP a directory and some of the “include” files have “include” links within those files, the entire system had to be reworked to have every single one of the top-level pages inside folders instead of sitting in the root file.
Now, all global elements and widgets are in the folder, “widgets.”
The files are accessed through relative links in PHP “includes” in the other top-level page folders “about-me,” “contact,” “home,” “projects,” and “resume.” (The other folders are just for the bottom page credits code and misc website files such as CSS, JS, and archived code.)
Here is the code for the home page:
<?php
$pageTitle = "Home";
$pageDescription = "Homepage of Teal Sparrow, Web Development and Design by Lillian Putzer";
$pageStyleSheet = "home.css";
// do not put parent folders in paths, this is done in the head php code
$pageKeywords = "home, portfolio, web development, web design";
$pageRobots = "INDEX, FOLlOW";
$pageAuthor = "Lillian Putzer";
$pageUpdated = "2/28/2023";
$pageAttributionCredits = "../credits/index.php";
?>
<!DOCTYPE html>
<html>
<?php include "../widgets/head.php"; ?>
<body>
<?php include "../widgets/header.php"; ?>
<section class="home-hero">
<div class="hero-text hero-half">
<h2>Lillian Putzer</h2>
<p class="hero-subtitle">Web Development and Design Specialist</p>
<p class="hero-description">Hello! I am a web developer with experience designing making, and managing websites using both hand code and website builders such as WordPress and Joomla. I am passionate about striving for high-quality and innovative work, evaluating and improving workflows, ensuring knowledge bases are compiled and organized well, thinking critically and creatively, never ignoring aesthetic and design quality, and ensuring that projects are user-friendly. I love any activity requiring visual graphics and abstract problem-solving, and I am committed to improving my ability to implement both in every project I complete.</p>
</div>
<!-- based on https://codepen.io/Kapilnemo/pen/gMgLWr/ with significant adjustments to the styling -->
<div class="hero-half hero-graphics-container">
<div class="hero-graphics">
<div class="hero-icon ic1"><img src="../media\img\html-5.png" alt="HTML5"></div>
<div class="hero-icon ic2"><img src="../media\img\css-3.png" alt="CSS"></div>
<div class="hero-icon ic3"><img src="../media\img\wordpress.png" alt="WordPress"></div>
<div class="hero-icon ic4"><img src="../media\img\responsive-design.png" alt="responsive design"></div>
<img src="../media/img/me1.png" alt="image" class="hero-face">
<div class="hero-icon ic5"><img src="../media\img\js.png" alt="JavaScript"></div>
<div class="hero-icon ic6"><img src="../media\img\photoshop.png" alt="Photoshop"></div>
<div class="hero-icon ic7"><img src="../media\img\seo.png" alt="Search Engine Optimization"></div>
<div class="hero-icon ic8"><img src="../media\img\logo-design.png" alt="Logo-design"></div>
</div>
</div>
</section>
<?php include "../widgets/projects-featured.php" ?>
<section class="generic-section-block recent-activity">
<h2>My Recent Activity</h2>
<div class="recent-activity-box">
<!-- <iframe class="raindrop-iframe" allowfullscreen frameborder="0" src="https://raindrop.io/bookstackdev/web-dev-sharing-28860822/embed/theme=auto&sort=-created"></iframe> -->
<iframe class="raindrop-iframe activityfeed" style="border: 0; " allowfullscreen frameborder="0" src="https://raindrop.io/bookstackdev/raindrop-web-dev-sharing-28860822/embed/sort=-created"></iframe>
<a data-pin-do="embedBoard" data-pin-board-width="400" data-pin-scale-height="450" data-pin-scale-width="80" href="https://www.pinterest.com/lilliantealsparrow/coding-pins/" class="activityfeed"></a>
<a class="twitter-timeline activityfeed" href="https://twitter.com/Lil_tealsparrow">Tweets by Lil_tealsparrow</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</section>
<?php include "../widgets/contact-insert.php" ?>
<?php include "../widgets/footer.php" ?>
<!-- Scripts for social media -->
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
</body>
</html>
However, as you can see, all of the metadata for the project is in PHP variables. In the head file, the variable information is inserted, and then the whole thing is inserted into the page PHP.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> <?php echo $pageTitle; ?> | Teal Sparrow, Web Development and Design by Lillian Putzer</title>
<meta name="description" content="<?php echo $pageDescription; ?>">
<link rel="stylesheet" href="../src/css/global.css">
<link rel="stylesheet" href= <?php echo "../src/css/" . $pageStyleSheet; ?>>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
I still need to work the author, robots, and other meta-information variables into this, I know. But this is what I have so far.
The whole rest of the website is interconnected like this. One final thing I want to mention is that my nav and header information are in separate PHP files, and then when the header is displayed on a page through an include, the nav is included as an include in the header file. I did this so that I could put the same nav links in the footer if I wanted to without worrying about whether the top nav bar and the one in the footer included all of the same links. This was an imitation of how WordPress lets you assign nav menus to different parts of the website.
Each project documentation file on the portfolio website will have PHP variables for each one of the pieces of content as well, and then be forced into a project data template made with PHP. This is to insure uniformity and efficiency, but I need to refactor the system as some parts are a little overkill right now.
Project doc layout file:
<!DOCTYPE html>
<html>
<?php include "../head.php"; ?>
<body>
<?php include "../header.php"; ?>
<div class="projectdata">
<h2><?php echo $projectName; ?> Project</h2>
<div class="carousel"><?php echo $projectImages; ?></div>
<div class="projectmetadata">
<p>Project completed for: <?php echo $projectFolder; ?></p>
<p>Date: <?php echo $projectTime; ?></p>
</div>
<h3>Criteria</h3>
<p><?php echo $projectCriteria; ?></p>
<h3>Reflection</h3>
<div><?php echo $projectReflection; ?></div>
</div>
<?php include "../widgets/contact-insert.php" ?>
<?php include "../footer.php" ?>
</body></html>
However, this code is never accessed through the URL. Below is the code for an example project data page. You will notice the file is ENTIRELY composed of PHP variables, with only one include at the bottom. The include has the rest of the page data and includes. This is to ensure that every single project page is maximally consistent and there is virtually no room for me to miss anything in any project file without a PHP error displaying.
<?php
$pageTitle = "Project Documentation Template";
$pageDescription = "Lillian Putzer's web development and design projects.";
$pageStyleSheet = "project-single.css";
$pageKeywords = "home, portfolio, web development, web design";
$pageRobots = "INDEX, FOLlOW";
$pageAuthor = "Lillian Putzer";
$pageUpdated = "2/28/2023";
$pageAttributionCredits = "../credits/other.php";
?>
<!-- Consider storing images in a PHP array and have it be delivered with a for loop in each doc -->
<?php
$projectName = "Lorem Ipsum";
$projectFolder = "Class";
$projectTime = "March";
$projectCriteria = <<<HERE
<p> Hey don't forget the documentation with ul with sub lu with ul in the li and li in those ul </p>
HERE;
$projectImages = <<<HERE
<img src="media\img\phi-1080-1920.png">
<img src="media\img\phi-1080-1920.png">
<img src="media\img\phi-1080-1920.png">
<img src="media\img\phi-1080-1920.png">
<img src="media\img\phi-1080-1920.png">
HERE;
$projectReflection = <<<HERE
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla posuere sollicitudin aliquam ultrices sagittis. Arcu dictum varius duis at consectetur. Viverra nam libero justo laoreet sit amet cursus. Nunc scelerisque viverra mauris in. Ornare suspendisse sed nisi lacus sed viverra. Sed cras ornare arcu dui vivamus. Donec et odio pellentesque diam volutpat commodo. Nisl nisi scelerisque eu ultrices vitae auctor. Tortor id aliquet lectus proin. </p>
<p> Integer vitae justo eget magna. Orci phasellus egestas tellus rutrum tellus. Enim tortor at auctor urna nunc. Faucibus et molestie ac feugiat sed. Euismod quis viverra nibh cras. Non pulvinar neque laoreet suspendisse. Massa tempor nec feugiat nisl. Nec nam aliquam sem et tortor. Euismod elementum nisi quis eleifend quam adipiscing vitae. Quis vel eros donec ac odio tempor orci. Non nisi est sit amet facilisis magna etiam tempor."</p>
HERE;
?>
<?php include "project-doc.php"; ?>
I realize that I still have a lot of things to tweak on this project, so I can’t give much of a tutorial other than this. Once it is done, I would love to put together a tutorial video. PHP includes and variables are a lot of fun, and allow the parts of the website to come together much faster.
I hope you found this at least somewhat interesting and educational, even if it is possibly a bit confusing and poorly explained. But I would rate this method 10/10, would definitely recommend using PHP includes to make sure that the global elements on the website are synchronized across all pages. Hand coding the global HTML and making sure it is the same on all pages by hand is an absolute nightmare, and using JS to insert it would be frustrating as well.
Leave a Reply