My name is Alex.
Sorry for my rather bad Englisch because i come from Germany.
I just started programming with Node.js.
Previously i made some small static HTML and CSS websites.
I have some beginner questions (which might be dump).
I think these questions are very general for now and have therefore not included any code examples.
So far I have written a static HTML website which I host locally on my computer using Node.js and Express.
My Questions are:
Which actions within a web application should take place on the client side and which on the server side. For example, I have several buttons on the start page. With the help of which predefined users can log in. When clicking on a button, the user should be redirected to the login page. The user name of the respective user should be entered directly into the username field on the login page.
How do I implement such a transition?
The username would probably have to be passed to the server using a post call. How does the user get to the next page? Should this be a simple link or should I send the new HTML document to the user via app.sendFile()?
For example, how do I change tags in an HTML document using Node.js. The same example as before a user is logged in and redirected to the next page. Now he should be greeted with his name. The name can be read from a database using the UUID.
How do I get this name into a tag?
Do I need a template engine or are there other ways to change a static HTML page.
Thank you in advance for your help.
In my opinion, security-critical parts logic be placed on the server (logging in, checking balance, authorization, etc.).
Traditionally, no code on the client side is required. You click a link/submit a form, which sends a request to a server, the server responds, the client displays the new page.
Using client side code, however, can make your app smoother and reduce the load of the server. For example: the user clicks on the shopping cart button. Instead of reloading the whole page, the user sends an ajax request, and the server responds with the cart data. Then the client updates the document, displaying the formatted cart data.
You can't "change html tags" from nodejs. You can send a response. If you send a html response, you decide how to produce the response. You can just concatenate html strings, but using a template engine is a better solution.
Related
I've been searching around and couldn't find a good solution to this.
I'm working on a school project that built upon HTML (Making a bunch of pages) -> CSS (Styling the pages) -> JS (Adding some functionality) and finally backend using whatever we want.
I've used mongodb and node/express to have a functional sign up and login and it works via POSTMAN, but I'm not sure how to connect that to my existing html file that was made for a prototype sign up/login.
Any advice?
There's several things you need to consider.
If the goal is to authenticate users through your backend you need a way for your front end to communicate to the backend and check whether or not the user is logged in. To do this you'll need the express server to validate the user's login information and send a token back to the user. The user can then use this token to access protected routes on the server.
You can send a POST request to your server containing the login information with the axios library, and have the server redirect the user to a protected url upon a successful request.
I couldn't explain how to do this in this post alone, but here's an excellent tutorial on how to get started.
authentication tutorial
It sounds like you already know what to use for backend, but not frontend.
You need to choose frontend such as React, Angular or Vue.js etc.
and connect your backend to the Server if it makes sense to you.
I recommend to look up React tutorial ( Or any other Frontend ) and move your HTML, CSS and JS to the project first.
Now I have a page showing all meetings with collapsible accordions. In the beginning all the meetings are collapsed. Then when I click on the meeting button (which is named as 'Audio' in the screenshot), a request containing the meeting id is send to the node.js express and meeting details are retrieved from the database and returned by express to the same html page. To show the meeting details, the previously collapsed panel will be displayed.
Below is the screenshot for the collapsed meetings. The first two columns are for meeting codes as well as meeting names.
So basically it is calling express from the front-end by routing, and from the express only data but not the full html is returned and the js file of the html will be dealing those data and display them in the panel.
Is there any way for node.js express to send only data to the front-end html without refreshing the page?
There is a possibility, yes, through AJAX, you just have to apply ajax together with node (express).
When you do a front a back ajax it returns you the data without reloading the page
Fonts:
https://www.w3schools.com/xml/ajax_intro.asp
https://pt.wikipedia.org/wiki/AJAX_(programa%C3%A7%C3%A3o)
I would like to create a web application where a user can drag and drop images and text onto a div or similar container. Then, when the user clicks a save button, the application would be able to save the content of the dropped items, as well as the positional information for those items.
Ultimately the user should be able to come back, open then application, and have the images and text back in the exact same places as when they were saved.
If anyone knows a methodology or framework that could assist in accomplishing this, it would be appreciated.
When the user hits the save button, you will need to collect the dynamic state of the current web page (which sounds like images and positions) and send that to your server with some sort of user id that uniquely and securely identifies this user. The next time that user loads this web page, you can either put the state into the web page as it is retrieved from the server or you can use client-side javascript to retrieve that user's state from the server and then dynamically modify the page to match the desired state.
You can save the state to the server with either an ajax call or a post. You can retrieve the state from the server from the client javascript using an ajax call or if the state was already put into the web page by the server, you can just refer to it there.
I'm new to AJAX and PHP but I know that PHP is a server-side scripting language and so there will not be any changes to the html unless the user refreshes the page or the user submits a form. Therefore I suppose the change of the number in <span id="mercurymessagesCountValue"> when a facebook user receives a message
is AJAX-related.
And this is my guess:
The change of the number is triggered when it is detected that another user [the sender] has inserted a new row into a particular table and each column contains different data: the time, the message, the sender id and the receiver id.
So here's my question... In this case, how is the changes in the database detected and how does it trigger a javscript [or something else] to make changes to the html? Or if I'm wrong... can I know how Facebook does that? Thanks very much!!
If I got the question right, you should check out about pull and push models. Facebook works under the push model: facebook server knows when new message is received and it pushes the notification to the client (website open in the browser).
Let me clear a few things up for you here,
AJAX is simply a type of request being sent by the browser to go grab data from another page dynamically. In facebook's case, they actually have a special type of connection to the client computer to keep the page 'alive'. This way, they can push dynamic updates to the client without the need to constantly poll/refresh a single page on the server (would make large amounts of load).
So, let's just pretend, they are constantly refreshing the page on the server to determine how many notifications are unread -
Client -> Ajax Call -> Server PHP Page -> Ajax Return -> Client
So, in order, the client sends a request for the page to be generated by the server.
The server's php page will then count the number of 'unread' notification rows in the database for that particular user. It will then output the number of unread rows in plain html.
The client then recieves this plain HTML from the Ajax call, and simply updates the DOM with the new number of unread notifications
PLEASE NOTE: This is not how facebook works, but it's a good example of how to set up your own basic notification system if you are new to dynamic coding.
My guess is that requests are sent frequently from the client via Javascript, to the host, asking "has anything new happend since last time i asked?". The answer is responded by the server, with PHP, if it is yes, the new data is delivered in the respond and JavaScript updates the DOM (HTML) with the new data, like showing the red flag or something.
javascript:location.load(t);
(t=time interval)
i guess ,, refreshing a page in every several seconds will pop up the notifications recieved..!!
I have a simple product catalogue for businesses. There is a catalogue's management interface for adding products. Each business has a unique domain name where all its products are listed.
I would like to extend catagloue's functionality and allow businesses to have their products listed on facebook.
Functionality of the facebook application:
- Each business can install application from catalogue's management interface (I would like to have a button that opens facebook in a new window and prompts user to authorize access to one of user's existing Facebook Pages)
- installing application adds a Tab on selected Facebook Page,
- by clicking on a Tab visitor of the Facebook Page is presented with a list of products specific for this business. Data for that page is dynamic and can be accessed with a REST call and presented as json or html.
We would like each business that have a product catalogue with us to install application and have it automatically configured to use specific domain name when requesting product data.
Is it all technically possible? Could you point me into the right direction on how to
- install application from external website
- configure that application with a parameter (perhaps passed in url when requesting application installation)
- automatically add Page Tab for this application
Cheers,
Michal
Yes it is possible. But it'll be a little different from what you are thinking, i guess.
I recently implemented code to add a tab to a page programmatically, it is as follows(in PHP) :
$tabAdded=$facebook->api("/".$id."/tabs","post", array("access_token" => $access,
"app_id" => $fbconfig['appid']));
From the code we see that we need an app id, an access token, and the page id($id). $facebook is an instance of the FacebookPHPSDK.
So here's how we can get the three things in question:
First app id, you'll need to create a Facebook page tab app, select Page Tab in the app's Basic settings (where you can mention the page tab url. This url will have the content for a page tab.) You'll also need to enable website because you need to ask the user for necessary permissions (namely manage_pages). For your specific requirement you have to give the domain of the catalogue management app.
Second page id and access token, once you have manage_pages permission you can query the graph api to get the pages of the user using : api('me/accounts') this returns data with page name, page category, page id, page access token for all the user's pages.
#thaddeusmt has already mentioned that you can't create new applications, and need to use the same app, you have to read the signed request and get the page id, and serve content. All that will be left to do is link your customer domains to the correct page ids.
Hope this was useful.
You can install/uninstall (add/remove) application tabs to/from Pages using the Facebook API:
http://developers.facebook.com/docs/reference/api/page/#tabs
You cannot create new applications, however. So you will need to use the same application for each Page.
The way you can show different content for each Page in the Tab (using the same application) is by checking the Signed Request. This contains the ID of the Facebook Page. The code that serves up your application Tab can look at the Page ID and serve up the appropriate content for that Page.
I hope this helps get you on the trail. Good luck!
Yes it is possible.
It's a two way process
First you have to get page_access_token through graphAPI.
www.facebook.com/?fields=access_token
This will return Page_access_token.
Use page access token and use post method
www.facebook.com/yourpageid/tabs/
Post Parameters:
app_id= 'YourAppID'
access_token = 'access_token'
That way you can add your facebook app into facebookPage.