How can I create a different URL for every new Object - javascript

I have built this site "https://supsurvey.herokuapp.com/SurveyCreate.html"
You create a survey and then it redirects you to a unique URL
https://supsurvey.herokuapp.com/SurveyPage.html#718807c9-3a5b-4745-b953-511afef5e073
In the surveyCreate page I have location.assign (SurveyPage.html#${survey.id}) which is linked to SurveyPage.js and from there I extract the uuid4 using currentUrl.split (#) and then I send a get request to my server which is built in NODE-JavaScript (only for strong survey objects in MongoDB) for the correct survey OBJECT and display it to the user.
I want so so that after you press create Survey you will be redirected to
https://supsurvey.herokuapp.com/SurveyPage/718807c9-3a5b-4745-b953-511afef5e073
So instead of .html#{uuid} to /{uuid}
How do I do that?
I have tried changing to location.assign (SurveyPage/${survey.id})
but it fail because it doesn't find the file without the .html extension
I also tried location.assign (SurveyPage.html/${survey.id}) which also doesn't work.

since you are using NODE for backend - you can build your app using express
https://expressjs.com/en/api.html#req.baseUrl
allows for api like route rewriting to accomplish what you want
can also be done using the more robust Hapi server
https://hapi.dev/
can be done on any language really
slimphp works great for php apps
http://www.slimframework.com/

Related

implement rest html frontend PATCH

I'm new to this. To practice, I am currently creating a REST API with nodejs and express, with the following endpoints:
GET site.tld/project/21 -> Show Project 21
POST site.tld/project/33 -> Create Project 33
PATCH site.tld/project/44 -> Change project 44
DELETE site.tld/project/55 -> Delete project 55
etc
I want have a Website, to Show, Create, Patch and Delete Projects. So I implement the REST Client in the browser via javascript. I have built a nice frontend with Bootstrap. To send the PATCH requests from the frontend to the backend I use a script with fetch(),
Now my question:
If I want to make an HTTP PATCH or DELETE request to the API, I need the ID of the project. How do I get the ID of the project in the frontend?
I found the following possibilities:
Get and Extract the URL with window.location.href in the frontend, since the URL of the Webpage to edit the Project contains the ID, e.g: url is "site.tld/project/33" so the ID are "33".
I use ejs templates, I can send the ID from the backend to the frontend, and bind the data to an html data-* Tag and extract this via javascript.
None of this doesn't feel right. Can someone please explain to me what the correct way is?

How would custom user links work?

By custom user links, i mean like for example when a user registers to the website, a page is created specifically for that user with a link.
For Example
https:/domain.com/users/customerName
Then after creating the link, the website will automatically customize the website by using a clone of a specific webpage.
*Btw i've already took Care of the Login/Register part. I just need to know how custom user links would work.
Option 1: example.com/user
Use a single PHP file and an .htaccess file. Check out How to create friendly URL in php?
Option 2: user.example.com
Create sub-domains for each user, also uses .htaccess. Check out How to let PHP to create subdomain automatically for each user?
Option 3: example.com?user=name
Create a single php file and use $_GET parameters. This is the most usual and easiest way to customize the website based on the user who registered and logged in. (usually using user ID number: example.com/profile.php?user=71)
Of course there's also Session handling.
I think you searching for URL rewriting concept.
If user login the page no need to clone the page.you could access the same page with this user data and specification(dynamic page).Many the page content with php functions
URL rewriting
you could the function in .htaccess
if user enters the page
http://example.com/someuser
its rewrite the url with
http://example.com?q=someuser
if you see the url bar its like special page for the user.
It's actually fairly simple. You just use GET within PHP and the URL would be something like http://example.com/user?id=4453623 - If you've ever been on facebook you'll notice they use PHP for the profile pages and much other things too. If you go to your profile page, you'll notice a "id=" variable up in the URL and that's how they determine which profile page to display to you.
This is basically what #Granny commented.

Create folder in web server javascript

I'm looking to dynamically create folders in my web server using JavaScript. After doing some research, I've found that this isn't usually accomplished without a server side extension like Node.js, but I was wondering if their were any APIs out their that would provide something like this.
I heard that ASP might be a good idea too, so I might give that a try, but I'd like to know from you guys.
Basically to give you an idea of what I am looking to achieve.
When I have a user visit my page, a random number is generated and stored in a variable, let's say: 1234
I want to create a folder in my webserver called users and within that folder, create a 1234.html content-filled file.
Web Server
------users\1234.html
Thanks
If you are using PHP then you can send request to server and php script does the rest
function makedirs($dirpath, $mode=0777) {
return is_dir($dirpath) || mkdir($dirpath, $mode, true);
}
I have copied this function..

How do I get user specific pages using javascript only?

I am creating a website where each user will have their uniq page. users can visit other user's pages by
http://website/user?user=<username>&session=<session>
Now I want to simplify above URL to
http://website/user/<username> (something like pinterest or facebook)
I thought I can use mod_rewrite. However, mod_rewrite is for server side. I do not want to include any PHP code. What I do to get data for a user :
load the basic HTML template and then based on which user we are talking about, load user's data asynchronously.
Can I achieve above in JS? If yes, how?
-Ajay
Unfortunately, you can't do exactly this.
But possible solution would be to place your HTML hub page to http://website/user/ and form user URLs like this: http://website/user/#username. JS can get the user name simply by var username = location.href.split("#")[1].
By the way, you said that you are not using PHP. How do you parse URL arguments then?

How does LinkedIn know or keep track of where I embedded its widget?

When you try to integrate with LinkedIn's Apply Now button, you first sign up for an API key. The form asks you to enter the Javascript Domain API, which is the Fully-qualified domain name of all pages that will call the JavaScript API with this key. In return, it produces an API key and some HTML code for you which you can copy n paste to your web page and get started.
This is the code their wizard produced:
<script src="http://platform.linkedin.com/in.js" type="text/javascript">
api_key: 7a4ghb12agvda4552da
</script>
<script type="IN/Apply"
data-companyname="Asd"
data-jobtitle="Software Developer"
data-joblocation="Istanbul"
data-email="abc#xyz.com">
</script>
Now, how does one keep track of where this script is embedded? I first entered http://example.com as the my Javascript Domain API. It turned out that I can only use this widget on the example.com domain.
What's inside in.js that tells LinkedIn where it is embedded?
The reason I'm asking is because I am also building a widget myself, and I want to make sure only the signed-up domains can use my widget.
Edit: As a bonus, what if I download in.js, remove the part where it does the domain check and include my own version of in.js in my page? How do they prevent that?
A LinkedIn employee mentions that both client-side and server-side checks are done. But what kind of a check would that be? I am looking for some deep insight into the issue. How can I produce such a widget? On the client-side, how do you check the current page that hosts your .js file? And how do you get which domain is hosting the js file?
Any help appreciated. Thanks.
The LinkedIn Javascript framework won't work if you make a local copy of in.js - the backend server (which in.'s calls) checks to make sure that the in.js is coming from the correct server as well as checking to make sure that the framework will only work on the specified domain(s).
This question was asked/answered here:
https://developer.linkedin.com/forum/security-prevent-impersonations
in.js has a script which adds another script tag into the DOM. It passes the API key (probably as a GET parameter in the script's URL), then the server checks the HTTP referer (which is a standard HTTP header browsers send indicating the website which sent them to get that page) and checks if it matches the API key in the database.
A simpler version would contain something like this:
document.write('<script src="http://mysite.com/api.js?key="' + api_key + '></' + 'script>');
Then on the server, something like this pseudo-code:
var expectedDomain = queryTable('apikeys').equal('key', GET('key')).field('domain').run();
if (expectedDomain === parseDomain(http.referer)) {
respond(myscript);
}

Categories