Member Avatar for cyberjorge

I am building a website for a real estate. As a designer I started doing the design in Photoshop, I am about to convert it in HTML but before I begin doing that I would like to know some things as this is my major concern.

How to make a filterable search function that will display the results on a frame / div of the same page. Displaying the picture, and basic some info.

Search an item by location, property name and property type.

Display each item properly on their respective categories menu.

I know it can be done with existing open source ecommerce templates, but it's too hard for me to learn all of that just for what i need. Also it's a little hard to integrate a custom design on the frontend.

Any help will be appreciated, guides, how to's, samples/template or codes will greatly help.

Thanks a lot!

  • 3 Contributors
  • 4 Replies
  • 230 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by cyberjorge

Dani AI

Generated

A compact implementation plan for that avoids full e‑commerce systems but gives a custom front end: create a small server search endpoint that accepts filter parameters and returns JSON, then use a short client-side script to POST the filters and render results into a results DIV. This preserves your Photoshop layout and keeps frontend styling simple while isolating the heavier logic on the server.

Key steps and minimal examples

  • Front end: a simple form (location, name, type) and a results container. Use fetch/AJAX to send the filters and receive JSON.
fetch('/search.php', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({location, name, type, page})
})
  .then(r => r.json())
  .then(renderResults);
  • Server: one endpoint that validates input, builds optional WHERE clauses, uses prepared statements and returns an array of rows (id, title, thumb_path, price, etc.). Example pattern (PDO):
$filters=[];$params=[];
if(!empty($data['location'])){$filters[]='location=:loc';$params[':loc']=$data['location'];}
$sql='SELECT id,title,thumb_path FROM properties'.(count($filters)?' WHERE '.implode(' AND ',$filters):'').' LIMIT :limit OFFSET :offset';
$stmt=$pdo->prepare($sql);
foreach($params as $k=>$v) $stmt->bindValue($k,$v);
$stmt->bindValue(':limit',(int)$limit,PDO::PARAM_INT);
$stmt->bindValue(':offset',(int)$offset,PDO::PARAM_INT);
$stmt->execute();
echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));

Performance, security and UX notes

  • Index columns used in filters (location, type). For partial name matching add full-text search or a dedicated search engine when data grows.
  • Store image file paths in the DB and serve pre-made thumbnails; avoid BLOBs for UI images.
  • Always use prepared statements and HTML-escape rendered values. Validate numeric params before binding.
  • Add LIMIT/OFFSET and consider keyset pagination for large tables. Provide a non-JS fallback by posting the same form to a server-rendered page.

Practical workflow
Start with a tiny prototype (one filter + results), verify requests in DevTools and server logs, then extend filters and pagination. was right that server work is required; ’s point about timeline is valid—hire help if a deadline is tight.

Recommended Answers

All 4 Replies

Member Avatar for ChicagoData

You're asking for a simple way to do something potentially very difficult. The search functions you need would require a database and programming well beyond HTML.

If you haven't already discovered a solution for this, I would suggest you just hire a programmer.

Maybe you'll be lucky enough to find someone who's written something similar and all you'll need to do is input the data for your specific site.

Member Avatar for cyberjorge

What I need is a search function much like the Property Finder in this Website.

The database has been set-up using MySql.

I admit it's difficult, but maybe not for someone who is well-versed in this subject. And I am not, that's why I am asking for someone who can at least give me a hint on what to do so I can do it myself (with my basic knowledge and willingness to learn) without hiring a programmer. Or if no one is willing to help, I'll just try my luck as you have said.

Member Avatar for Tlhokomelo

Hmm... I am actually lazy to reply to this, forgive me if I seem rude - but you don't sound like you are really "willing" to do this, seem more like you just want someone to say "Here, Ctrl+c this and then Ctrl+v it here - It will work! :)"

Like ChicagoData said: You're asking for a simple way to do something potentially very difficult.

Either you google around to find a similar to what you need and pick up a book or four on PHP and MySQL (your deadline probably does not accommodate time for this, anyway).

Therefore you should really consider hiring a programmer to help you out. You are better of with less than 80% off what you were going to make from your current client who may refer you 3++ more clients who may want "the same website" as the other client - you bought and now have learned how to reuse the code - provided you negotiated to keep copyrights of course, than to loose your client completely.

You are probably more of an entrepreneur than you may be a web developer, so start thinking like one.

Member Avatar for cyberjorge

Thanks for the reply Tlhokomelo's,

Yes I've googled this before posting. Right now, I'm working on it using a php tutorial.

No, I am not an entrepreneur, I'm a designer sir. A boss's requirement for his other business.

Thank you guys anyway.

Thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.