What are some of the best ways to create single page websites with dynamic content?

Question

I'm expirementing with creating a website as a IT Ticketing system. This website has a top nav and a side nav. I want the content area to change depending on the link clicked. I've managed to get the concept down using just php through isset($_GET['page']) and conditional statements which activates the include command to pull the php documents I want to fill the content area.

This partially works, but the entire page seems to get completely reloaded when I click one of the links. The links are basically just a href="?page=tickets". This defeats the whole purpose of my template.

Basically I'm looking for advice as to which direction to head. I know there's frameworks like laravel that uses things like blade for MVC, there's iframes, and so many things, but I don't know what's right for this specific task. Thanks for the help.

Answer 1

The thing you are looking for is called AJAX.

It consists of an ability for a web page to perform an HTTP request without refreshing itself, and based on the response of this request, to update a part of the page.

The response can be an HTML content to insert somewhere in the page, but also anything else, such as JSON or XML, which will be used to determine, on client side, what elements should be changed and how.

Essentially, the response can be either the HTML containing the ticket information, or it can be, say, its JSON representation, and it would belong to the client application to know how the interface should be manipulated, i.e. what fields should be changed, which ones should be shown or hidden, etc.

Answer 2

You can use angular as well.

angular will provide you more performance,it will send HTTP requests without refreshing the page.

It will also provide the capability to create Single Page Application in a very clean and maintainable way.Angular apps also load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.

The component-based structure of Angular makes the components highly reusable across the app. You can build the UI (User Interface) with moving parts, while also ensuring a smooth development process for developers.

Answer 3

Honestly, your question is much too broad.

I'd suggest that you spend some quality time at places like github.com and sourceforge.com where you can, at your leisure, search for and then peruse the source-code of real projects that might be similar to what you have in mind.

Also be mindful that you might find a nearly-complete project that you can "steal," and then "kit-bash" into exactly what you need, without writing it from scratch! "Do Not Do A Thing Already Done!™"