I have written this file in PHP using MySQL. However, I have a lot of code that looks like it could be simplified. Can someone suggest a way to make this more efficient? i.e. I want to follow the D.R.Y method.
<?php
require_once('database.php');
try{
$result = $conn->query('SELECT id FROM documentaries');
}catch(Exception $e){
echo $e->getMessage();
die();
}
$docs = $result->FetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tom Turner - Director of Photography</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/responsivemenu.js"></script>
</head>
<body>
<header>
<a href="index.php" id="logo">
<h1>Tom Turner</h1>
<h2>Director of Photography</h2>
</a>
<nav>
<ul>
<li><a href="index.php" >About</a></li>
<li><a href="/portfolio.php" class="selected">Portfolio</a></li>
<li><a href="/contact.php">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<div class="showreel-container">
<iframe src="https://player.vimeo.com/video/148640837?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</section>
<section>
<div id="controls" id="Controls">
<button class="filter" data-filter="all">All</button>
<button class="filter" data-filter=".documentaries">Documentary</button>
<button class="filter" data-filter=".commercial">Commercial</button>
<button class="filter" data-filter=".charity">Charity/NGO/Commisions</button>
<button class="filter" data-filter=".music">Music</button>
<button class="filter" data-filter=".drama">Drama</button>
</div>
<div id="Container" class="container">
<div class="mix documentaries" data-myorder="1">
<?php
foreach($docs as $doc){
if ($doc["id"] == "1"){
echo '<a href="item.php?id='.$doc["id"].'"><img src="img/numbers-01" alt="Image one"/></a>';
}
}
?>
</div>
<div class="mix documentaries" data-myorder="2">
<?php
foreach($docs as $doc){
if ($doc["id"] == "2"){
echo '<a href="item.php?id='.$doc["id"].'"><img src="img/numbers-02" alt="Image two"/></a>';
}
}
?>
</div>
<div class="mix documentaries" data-myorder="3">
<?php
foreach($docs as $doc){
if ($doc["id"] == "3"){
echo '<a href="item.php?id='.$doc["id"].'"><img src="img/numbers-01" alt="Image one"/></a>';
}
}
?>
</div>
<div class="mix documentaries" data-myorder="4">
<?php
foreach($docs as $doc){
if ($doc["id"] == "4"){
echo '<a href="item.php?id='.$doc["id"].'"><img src="img/numbers-01" alt="Image one"/></a>';
}
}
?>
</div>
<div class="mix documentaries" data-myorder="5">
<?php
foreach($docs as $doc){
if ($doc["id"] == "5"){
echo '<a href="item.php?id='.$doc["id"].'"><img src="img/numbers-01" alt="Image one"/></a>';
}
}
?>
</div>
<div class="mix commercial" data-myorder="6">
<?php
foreach($docs as $doc){
if ($doc["id"] == "6"){
echo '<a href="item.php?id='.$doc["id"].'"><img src="img/numbers-01" alt="Image one"/></a>';
}
}
?>
</div>
<div class="mix commercial" data-myorder="7">
<?php
foreach($docs as $doc){
if ($doc["id"] == "7"){
echo '<a href="item.php?id='.$doc["id"].'"><img src="img/numbers-01" alt="Image one"/></a>';
}
}
?>
</div>
<div class="mix charity" data-myorder="8">
<?php
foreach($docs as $doc){
if ($doc["id"] == "8"){
echo '<a href="item.php?id='.$doc["id"].'"><img src="img/numbers-01" alt="Image one"/></a>';
}
}
?>
</div>
<div class="mix charity" data-myorder="9">
<?php
foreach($docs as $doc){
if ($doc["id"] == "9"){
echo '<a href="item.php?id='.$doc["id"].'"><img src="img/numbers-01" alt="Image one"/></a>';
}
}
?>
</div>
<div class="mix charity" data-myorder="10">
<?php
foreach($docs as $doc){
if ($doc["id"] == "10"){
echo '<a href="item.php?id='.$doc["id"].'"><img src="img/numbers-01" alt="Image one"/></a>';
}
}
?>
</div>
<div class="mix charity" data-myorder="11">
<?php
foreach($docs as $doc){
if ($doc["id"] == "11"){
echo '<a href="item.php?id='.$doc["id"].'"><img src="img/numbers-01" alt="Image one"/></a>';
}
}
?>
</div>
<div class="mix charity" data-myorder="12">
<?php
foreach($docs as $doc){
if ($doc["id"] == "12"){
echo '<a href="item.php?id='.$doc["id"].'"><img src="img/numbers-01" alt="Image one"/></a>';
}
}
?>
</div>
<div class="mix music" data-myorder="13">
<?php
foreach($docs as $doc){
if ($doc["id"] == "13"){
echo '<a href="item.php?id='.$doc["id"].'"><img src="img/numbers-01" alt="Image one"/></a>';
}
}
?>
</div>
<div class="mix music" data-myorder="14">
<?php
foreach($docs as $doc){
if ($doc["id"] == "14"){
echo '<a href="item.php?id='.$doc["id"].'"><img src="img/numbers-01" alt="Image one"/></a>';
}
}
?>
</div>
<div class="mix drama" data-myorder="15">
<?php
foreach($docs as $doc){
if ($doc["id"] == "15"){
echo '<a href="item.php?id='.$doc["id"].'"><img src="img/numbers-01" alt="Image one"/></a>';
}
}
?>
</div>
<div class="gap"></div>
<div class="gap"></div>
</div>
</section>
</div>
<footer class="main-footer">
<div id="footer-notes">
<p>Tom Turner - Director of Photography</p>
<p>© Tom Turner - All Rights Reserved</p>
</div>
<div id="mayur">
<p>© 2015 Website by <a href="https//:www.mayurpande.com">Mayur Pande</a></p>
</div>
<div class="social-media">
<ul>
<li><a href="mailto:[email protected]"><img src="img/mail_circle.png" alt="Email Logo" /></a></li>
<li><a href="https://www.facebook.com/tom.turner.397501?fref=ts"><img src="img/fbcircle.png" alt="Facebook Logo" /></a></li>
<li><a href="https://vimeo.com/user6107855"><img src="img/vimeo_circle.png" alt="Vimeo Logo" /></a></li>
<li><a href="https://twitter.com/intent/tweet?screen_name=mayurpandeuk"><img src="img/twitter_circle.png" alt="Twitter Logo" /></a></li>
</ul>
</div>
</footer>
</body>
</html>