ADDING SEARCH BAR

 WE ADD A SEAARCH BAR BY USING BOOTSTRAP. IN THE NAV-BAR.EJS

IT IS ADDED BETWEEN THE EXPLORE AND ADD BUTTON 

<div class="navbar-nav ms-auto">

        <form

          class="d-flex"

          role="search"

          method="get"

          action="/listings/search?q=location"

        >

          <input

            class="form-control me-2 search-inp"

            type="search"

            placeholder="Search By location"

            aria-label="Search"

            name="location"

          />

          <button class="btn btn-search" type="submit">

            <i class="fa-solid fa-magnifying-glass"></i>

          </button>

        </form>

      </div>

STYLING (STYLE.CSS)

.btn-search{

  background-color: #fe424d !important;

  color: #fff !important;

  border-radius: 1rem !important;

  padding: 0 1rem 0 1rem !important;

}

.btn-search:hover{

  background-color: #fff !important;

  color: #fe424d !important;

}

.search-inp{

  border-radius: 1rem !important;

  padding: 0 1rem 0 1rem !important;

}

BACKEND MAKING IT FUNCTIONAL

ROUTE FOLDER(LISTINGS.JS)

router.get("/search", wrapAsync(listingController.searchListing));

IN CONTROLLER(LISTING.JS)

module.exports.searchListing = async (req, res) => {

  let { location } = req.query;

  let AllListings = await Listing.find({ location: location });

  if (!AllListings.length) {

    req.flash("error", " Oops!!No listings Found");

    return res.redirect("/listings");

  } else {

  res.render("listings/index.ejs", { AllListings });

  }

};

only this is added for testing