Display Listing View

We have the data from the database, now we need to display it in the view.

In the controller listings/show.php, remove the inspect($listings) and add the following:

loadView('listings/show', [
  'listing' => $listing,
]);

Let's create a new file in views/listings called show.view.php.

Add your partial includes and get the HTML from the theme details.html page. It should look like this:

<?php loadPartial('head'); ?>
<?php loadPartial('navbar'); ?>
<?php loadPartial('top-banner'); ?>

<section class="container mx-auto p-4 mt-4">
  <div class="rounded-lg shadow-md bg-white">
    <a class="block p-4 text-blue-700" href="/">
      <i class="fa fa-arrow-alt-circle-left"></i>
      Back To Listings</a>
    <div class="p-4">
      <h2 class="text-xl font-semibold">Software Engineer</h2>
      <p class="text-gray-700 text-lg mt-2">
        We are seeking a skilled software engineer to develop high-quality
        software solutions.
      </p>
      <ul class="my-4 bg-gray-100 p-4">
        <li class="mb-2"><strong>Salary:</strong> $80,000</li>
        <li class="mb-2">
          <strong>Location:</strong> New York
          <span class="text-xs bg-blue-500 text-white rounded-full px-2 py-1 ml-2">Local</span>
        </li>
        <li class="mb-2">
          <strong>Tags:</strong> <span>Development</span>,
          <span>Coding</span>
        </li>
      </ul>
    </div>
  </div>
</section>

<section class="container mx-auto p-4">
  <h2 class="text-xl font-semibold mb-4">Job Details</h2>
  <div class="rounded-lg shadow-md bg-white p-4">
    <h3 class="text-lg font-semibold mb-2 text-blue-500">
      Job Requirements
    </h3>
    <p>
      Bachelors degree in Computer Science or related field, 3+ years of
      software development experience
    </p>
    <h3 class="text-lg font-semibold mt-4 mb-2 text-blue-500">Benefits</h3>
    <p>Healthcare, 401(k) matching, flexible work hours</p>
  </div>
  <p class="my-5">
    Put "Job Application" as the subject of your email and attach your
    resume.
  </p>
  <a href="mailto:manager@company.com" class="block w-full text-center px-5 py-2.5 shadow-sm rounded border text-base font-medium cursor-pointer text-indigo-700 bg-indigo-100 hover:bg-indigo-200">
    Apply Now
  </a>
</section>

<?php loadPartial('bottom-banner'); ?>
<?php loadPartial('footer'); ?>

Right now, the data is hard-coded. We need to replace it with the data from the database. Also, there is HTML and field values that we do not want to show if they are empty. For example, if there are no tags, we do not want to show the tags section. So our view will have some conditionals as well.

It should look like this:

<?php loadPartial('head'); ?>
<?php loadPartial('navbar'); ?>
<?php loadPartial('top-banner'); ?>

<section class="container mx-auto p-4 mt-4">
  <div class="rounded-lg shadow-md bg-white p-3">
    <div class="flex justify-between items-center">
      <a class="block p-4 text-blue-700" href="/listings">
        <i class="fa fa-arrow-alt-circle-left"></i>
        Back To Listings
      </a>
      <div class="flex space-x-4 ml-4">
        <a href="/listings/edit/<?= $listing->id; ?>" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded">Edit</a>
        <!-- Delete Form -->
        <form method="POST" action="/listings/delete/<?= $listing->id; ?>">
          <input type="hidden" name="_method" value="DELETE">
          <button type="submit" class="px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded">Delete</button>
        </form>
        <!-- End Delete Form -->
      </div>
    </div>

    <div class="p-4">
      <?= loadPartial('message'); ?>
      <h2 class="text-xl font-semibold"><?= $listing->title ?></h2>
      <p class="text-gray-700 text-lg mt-2">
        <?= $listing->description ?>
      </p>
      <ul class="my-4 bg-gray-100 p-4">
        <?php if ($listing->salary != null) : ?>
          <li class="mb-2"><strong>Salary:</strong> <?= formatSalary($listing->salary) ?></li>
        <?php endif; ?>
        <li class="mb-2">
          <strong>Location:</strong> <?= $listing->city ?>, <?= $listing->state ?>
          <!-- <span class="text-xs bg-blue-500 text-white rounded-full px-2 py-1 ml-2">Local</span> -->
        </li>
        <?php if ($listing->tags != null) : ?>
          <li class="mb-2">
            <strong>Tags:</strong> <?= $listing->tags ?>
          </li>
        <?php endif; ?>
      </ul>
    </div>
  </div>
</section>

<section class="container mx-auto p-4">
  <?php if ($listing->benefits != null || $listing->requirements != null) : ?>
    <h2 class="text-xl font-semibold mb-4">Job Details</h2>
    <div class="rounded-lg shadow-md bg-white p-4">
      <?php if ($listing->requirements != null) : ?>
        <h3 class="text-lg font-semibold mb-2 text-blue-500">
          Job Requirements
        </h3>
        <p>
          <?= $listing->requirements ?>
        </p>
      <?php endif; ?>
      <?php if ($listing->benefits != null) : ?>
        <h3 class="text-lg font-semibold mt-4 mb-2 text-blue-500">Benefits</h3>
        <p><?= $listing->benefits ?></p>
      <?php endif; ?>
    </div>
  <?php endif; ?>
  <p class="my-5">
    Put "Job Application" as the subject of your email and attach your
    resume.
  </p>
  <a href="mailto:<?= $listing->email ?>" class="block w-full text-center px-5 py-2.5 shadow-sm rounded border text-base font-medium cursor-pointer text-indigo-700 bg-indigo-100 hover:bg-indigo-200">
    Apply Now
  </a>
</section>

<?php loadPartial('bottom-banner'); ?>
<?php loadPartial('footer'); ?>

Now you should see the data for whatever listing you click on in the listings page. The id is coming from the URL and the data is coming from the database.