<?php    
    // attempt to connect to the DB
    $dbconn = mysqli_connect("localhost", "root", "", "famouscat");
    if ($dbconn->connect_error > 0) {
        die('Could not connect: ' . $dbconn->connect_error);
        exit(); // if it doesnt connect error page
    }
 
    // checking for an id if not then redirects back to index
    $CatID = 0;
    if (isset($_GET['CatID']))
        $CatID = $_GET['CatID'];
    
    if ($CatID == 0)
    {
        $redirect = "location: http://localhost/assignment/index.php";
        header($redirect);
    }

    // get the details of the cats 
    $sql = $dbconn->prepare("SELECT CatID as CatID,
									description as description	
									from famouscat
                                    where CatID = ?");
    $sql->bind_param('i', $CatID);	
    // execute the query 
    $sql->execute(); 
    
    // binding the fields
    $sql->bind_result( $CatID, $description);
    $sql->store_result();
    $sql->fetch();

  
    //close connection
    mysqli_close($dbconn);
?>

<html>
	<head>
		<title>Pawsome Website</title>
				
				<meta name="viewport" content="width=device-width, initialscale= 1">
				    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
					<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>      
					<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
				<link rel="stylesheet" href="style.css">
				
	</head>
	<body>
		<div data-role="page" id="catapi">
			<div class="ui-header" data-role="header">			
				<h1>Cat Description</h1>
				<!-- Homepage and Thanks page button with page animation-->
				<a href="index.php" data-transition="flow"  class="ui-btn-left ui-btn-corner-all ui-btn ui-icon-home ui-btn-icon-notext ui-shadow" title=" Home " data-form="ui-icon" data-role="button" role="button"></a>
				<a href="welcome.php" data-transition="flow" class="ui-btn-right ui-btn-corner-all ui-btn ui-icon-heart ui-btn-icon-notext ui-shadow" title="Welcome " data-form="ui-icon" data-role="button" role="button"></a>
				
			</div>	

			
			
					<div role="main" class="ui-content">
						<div class="col-md-3 mb-3">
                           <!-- Displays the cat description -->
                                   <?php echo $description?>" 
                                  
                        </div>
						
						<ul data-role="listview" data-inset="true">
										<!-- Back button -->
								<li><a href="famouscat.php"><img src="paw.png" alt="paw" class="ui-li-icon ui-corner-none">Back</a></li>
						</ul>
					</div>
			
		
			
			<div data-role="footer" data-position="fixed">
				<h4>Copyright Meowcorp &copy; 2021</h4>
			</div>
		</div>
				<script src="catlist.js"></script>
	</body>
</html>
 