Cache Section of HTML Code - ASP.Net - javascript

I have a situation where I have a page with tabs to hold multiple buttons for various functions. Each tab is for a different set of functionality (e.g. customers, orders and admin).
The way it was originally designed was I load all of the tabs and all of their buttons. The buttons shown is dependant on who is logged on.
Additionally, if a user clicks on a function it loads the code for that page, replacing the buttons in that tab as well as all of the code for the other tabs. I don't think this is very efficient and I would guess it would be better to load the content for the tabs using AJAX.
What would be the best way to accomplish this behaviour and make the code more responsive? My thought is that I would store the html that goes inside of the tab divs in the session variables, so I would only need to get the code once when the user logs on and then just serve it back to the user based on the currently selected tab.

To save on session you must have on your mine that:
The session data are saved all together, and read all together on the start reading of every page load, and write all together on the end of every page read. And the session lock all users, so if you add too much data and create a delay to read and write on the session, this can possible affect the users on your site. Imaging to create a big html page data that you save on session and its about 300k, and then you make the same 10 times, then the session data will be 3M that must reads and writes all the time.
So its like to add an extra data that follow the user session.
Its better if its possible to make your custom cache on a database, and save this just using the session key id, and load them only when the user enters that page, save it only when user change it.
From the other hand if you do not have many users, and you need to make it quick, or you do not have database connection, or is difficult to make a small custom cache, then use the session for one or two data of that.

Related

How to change JavaScript page functionality after user is authenticated without reloading page

I have a single webpage that uses an API to query backend for data, which is returned and plotted in a few figures. Backend is Node.js with Express.
The appearance of the figures is controlled through a set of JS functions that are loaded when the page initially loads.
After the user has been on the page for 30 seconds, I want to ask them to login or register by displaying a modal over the page.
If the login is successful, I'd like to close the modal and have new functionality available to the user, including changing the behavior of the original JS functions that were loaded when the user first arrived. But, I'd like to do this without reloading a new page with a separate set of JS functions.
I'm a relative newbie at this and have been having a hard time figuring out the right way to accomplish this.
I thought maybe there was a way to update the original JS function file by submitting an API get request and using the response to overwrite replace/overwrite the non-authenticated version. Then user would have access to new functionality without having reloaded the page.
But, I can't seem to find anything that would support this as the correct approach, or even whether this would be possible.
Really need help on which direction to go.

How can I 'lock' a page behind a log-in screen in jQuery/Bootstrap/JS?

I've been building a web app using Google's Firebase as a backend (for those who don't know, it's a Realtime database; any changes in data are reflected instantly and updated), there's other people working on the Android app with it so there's no other option (plus it's kinda cool). I was surprised that I have yet to write a single line of php or any server-side code. Anyway, jQuery is working perfectly fine for login and stuff.
Now I'm going to be making an admin page (with a separate login from the main users login). It'll be accessed in a completely separate way (by opening something like /admin.html). So the login can't be put on a separate page so people don't 'accidentally' access the admin panel by writing /admin.html in the address bar.
So I want to stop the admin page from completely loading until I've received confirmation from Firebase that the credentials are correct. So how can I achieve this knowing that both the login and the whole admin page needs to be in the same file. I'm positive this can be achieved with simple jQuery + Bootstrap but I'm not really sure how. Can anyone please point me in the right direction. Thanks in advance!
I have googled it of course but maybe my wording is off? :P
If I'm understanding your question correctly, your problem is that you need to create two separate views in a single file, and redirect to one or to another depending on your user "session", however, as all your code is in client, you don't have a "session" system operative.
Ok, there are several options you can take. I like the idea of using LocalStorage to store the user session.
When /admin.html is requested, your code checks for a valid session object (keep in mind that you'll need to define that session object) in the LocalStorage. If there is a valid object, you render the admin area, if there isn't any, you render the login area.
When someone sends username/pass to the database and you receive a valid response, you create a session object, store it in the LocalStorage and reload the page.
Keep in mind that you'll need to create a mechanism to make sessions die and a log off view.
For the dying sessions, as an idea, you can store the creation time and a expiration time in the session object. Each time a "session protected" page is served, when you check that the session object exist, you update it's expiration date a fixed amount (20 minutes plus current time, for example).
So, when you check if exists a valid session, you also check that it's expiration date has not due, and if it's, you delete the object.

Can you use javascript to change a php session variable?

I've got a php database driven website and I want to implement a feature where there is a section on the navigation bar which displays a history of previous pages visited (with their urls) on the website. I plan on using a $_SESSION array to store this list.
That should be easy enough, but I also want to have a delete button next to every history entry so the user can remove pages from the history bar. The problem with this is that to update the $_SESSION array and remove the entry, it will need to reload the page, and if the user is on a page such as a search results page it will come up with errors because the page generated relies on a submitted form. There would be other examples of this issue on other pages.
I'd rather not have to store the search etc. in a session variable to get around this so was wondering if there would be some way of using javascript to delete the entry on the history bar and then somehow update the php session variable from the javascript when the user navigates away from or refreshes the page... but I'm not sure how the js could change the php session variable. Could this work or is there another solution?
You can follow below steps:
Make an ajax call to a PHP file and destroy SESSION variables related to user's page visited history.
On ajax success, hide / remove HTML elements or container that display page history URLs on the web page using JavaScript.
Since your search page is dependent on POST values, this will ensure that user's page history is cleared without the need to refresh the page. When user navigates to some other link, page will get reloaded and user will not get older links.
Hope this helps!
You can use AJAX, for example if you push logout button ajax will send information to the server side but php will do all the work of destroying that session. The are many examples of ajax on stackoverflow.

What is the best way to store a dynamic webpage as an object?

I have a php application with MySQL for database.
I want to create a site builder. The idea is to use ajax for loading and storing the dynamic page content. The user will be able to modify the site (create and edit pages, navigation menus, etc.) while viewing the front-end. The changes will be presented in real time, and then committed once saved.
I'm not sure what would be the best method for manipulating and storing the dynamic page content.
Should I just change the DOM, and then save its current state somehow? Or, would it be better to use an object for storing the page's content and structure? Would it be better to store the pages in SQL, or file?
EDIT
So, what I decided on, if it helps anyone (and thanks to all who responded!):
I have created jQuery functions which allow the user to manipulate the DOM simply by clicking an element on the page, and then adding content to a new element (so for example I have a text and image insert tool). I'm using a handler object to track changes, which are then applied to the DOM once the user clicks update button.
Once the user saves the page, I am using ajax to save a portion of the DOM to a MySQL database.
Then I have a pagebuilder function created which calls my custom theme's header, pulls the html from the database, and then calls the theme's footer.
So far this is working very well. The pagebuilder takes care of constructing the page by using the url's ?page=x reference. This still allows my core app and theme system to control each page's header and footer, while still allowing for an easy way to edit, save and retrieve the content, all using ajax.
Based on my experience with Magento and your dynamic things, i think it'll better to save the dynamic content on database, but saving things like:
"Home"
"3 columns"
"Input - Text"
...
And when you get it back, you use the "directions" saved on database, to build your dynamic website.
I would say that it is a matter of architecture here. Storing in a Database will provide you better performance retrieving and storing long data streams, and will probably a better data organization along the way.
The question is -how can you store a Web site into a Database efficiently?-
Has a partner say before there are many ways of skin the cat. How complex do you want to go? are you going to store single pages? images? tables? full websites? will your users be able to store raw/other data too?
You see?
Hope it helps.

How to detect moving to different domain page?

I have a ruby on rails app and I want to detect user moving to different domain page
while in model creating wizard.
I stored model-data to DB at first-step of wizard and redirect_to second-step of wizard.
And I want to destroy it if user moving to different domain page while in second-step.
I already find a way to hook onbeforeload event to show warning to user.
But I want to warn it only if user moving to different domain page but not to third-step.
And if user want to moving different domain page then I want to destroy stored data.
What is a best solution to do this? Is there any way to detect where user want to go?
EDIT:
In second-step I want to create model from user upload file(ajax upload with jQuery File Uploader) and associate with first-step's model. So if I can get which id will assign to first-step's model then I can easily associate with it. This is why I want to store data in first-step.
And I don't want to expire unfineshed model until user explicitly leaving wizard.
Then can I detect whether user still opening wizard and just stopping very long time or
already leaving wizard page?
(I want to build app just like a desktop application so user can have unsaved file until explicity leaving wizard on multiple browser window)
That's is not possible. Once your page is unloaded you cannot do anything else. If the user is loading another domain page then that domain has control over the page, not you.
What you should do is store the data of the wizard pages not in db but on session state or even in a cookie, this is the good practice. Then, when user reach the final step of the wizard you read the data from cookie/session and write to db at once.
You cannot determine the user's intended destination within the onbeforeunload event, or any other. You also can't stop a user's request to load another page and instead redirect them to some destroy action before sending them off on their way.
If you are content with storing data into the database on each step as the user progresses through your wizard, you can look into setting up a cron job to run a rake task you create which can go through and delete incomplete wizards that are older than a certain age.
The cron (or equivalent) actually is something I'd consider doing even if you could detect a user leaving your site.

Categories

Resources