Querying server for files - javascript

This is a very general question, but I hope someone can help because I'm very new to web development.
I'm trying to program a simple blog system into my website. My idea was to have a form on my website where I could type up my article, then hit upload. The article would be sent, and saved, to the server using a Java Servlet.
My question is, how would I query the server for all those articles? Is there a way to do it in JavaScript? How does the client know what files to request from the server? If anyone could point me in the write direction, I would be very grateful because I have no idea what I'm doing!

When the articles are uploaded to the servlet, they have to be saved in some database.
On the client side you have to provide a hyperlink or menu option to view all the articles.
When the user clicks on the 'View All Articles' link it should call the servlet. The servlet has to fetch the records from the DB and put them in a list. This list then has to be added to a response object such as response.setAttribute("articleList",<your_list_of_articles>)
Now use the requestDispatcher object to forward the response to a jsp page.
In the Jsp page iterate through the list and display the articles.
If you want to display only specific articles, then instead of hyperlink to the 'View All Articles' page you can provide a form which takes the title of the article as parameter and submits to the servlet.

Your must be uploading the content in the pure text format. Receive it on server side i.e Servlet. Save this text with some more data related to blog author, data and an unique id in the data base using JDBC.
Now for retrieval, first you can list all the blogs on a page with anchor tag of author name.
Anchor should be like this.
Author name
Now on servlet you will have the blog id. use this id to retrieve the blog and return it to the browser.
This is a very rough explanation according to what you have asked.
Feel free to add more detail to question to get more specific answer.

Related

dynamically generate content for a page when clicking on product

everyone. I am making a website with t-shirts. I dynamically generate preview cards for products using a JSON file but I also need to generate content for an HTML file when clicking on the card. So, when I click on it, a new HTML page opens like product.html?product_id=id. I do not understand how to check for id or this part ?prodcut_id=id, and based on id it generates content for the page. Can anyone please link some guides or good solutions, I don't understand anything :(.
It sounds like you want the user's browser to ask the server to load a particular page based on the value of a variable called product_id.
The way a browser talks to a server is an HTTP Request, about which you can learn all the basics on javascipt.info and/or MDN.
The ?product_id=id is called the 'query' part of the URL, about which you can learn more on MDN and Wikipedia.
A request that gets a page with this kind of URL from the server is usually a GET request, which is simpler and requires less security than the more common and versatile POST request type.
You may notice some of the resources talking about AJAX requests (which are used to update part of the current page without reloading the whole thing), but you won't need to worry about this since you're just trying to have the browser navigate to a new page.
Your server needs to have some code to handle any such requests, basically saying:
"If anybody sends an HTTP GET request here, look at the value of the product_id variable and compare it to my available HTML files. If there's a match, send a response with the matching file, and if there's no match, send a page that says 'Error 404'."
That's the quick overview anyway. The resources will tell you much more about the details.
There are some solutions, how you can get the parameters from the url:
Get ID from URL with jQuery
It would also makes sense to understand what is a REST Api and how to build a own one, because i think you dont have a backend at the moment.
Here some refs:
https://www.conceptatech.com/blog/difference-front-end-back-end-development
https://www.tutorialspoint.com/nodejs/nodejs_restful_api.htm

Cross Domain form submit Google Tag Manager auto trigger

I have some problem while getting data from another site. In this case I want to get the reservation data from the booking engine site and they want to pass the data to me with Google Tag Manager. I don't really understand what I should do when they just need GTM code. What I should create in my server to get the data from the booking engine with Google Tag Manager ?
This is the illustrations:
I have two sites called sites1.com and sites2.com. In sites1.com I put the Google Tag Manager scripts to push form submit data like full name, last name, email, etc. After somebody submit the form I want to get the submited data in sites1.com to sites2.com with Google Tag Manager. My problem is how to get the data after somebody submited the form in sites1.com in my sites2.com ?
Please anybody knows how to resolve my problem . Thanks in advance .
Well if they implement your GTM from site2.com into site1.com all you need to do is:
Create a trigger for the submit button on the form (use the ID o class of the element and check for the that the Page URL contains site1.com/)
Create a tag where you want the information to be send
Scrap the fields with javascript or ask them to push to the dataLayer the information you need (in this case you can build the trigger based on this event)
And SUPER important: check all your triggers so no other tag fires on site1.com
2.1:
Im not sure if i get where you want this information to be stored but keep in mind GA does not accept PII. On the other hand if you want this in some DB you can just create and endpoint and send the information as parameters. Example:
site2.com/booking_info?field1={{DL variable}}
And just use a Custom IMG tag.
Ive made something like this using API Gateway, Lambda and DynamoDB and it took me 15 mins to set up. (just to give you perspective)
-- EDIT:
Ones you have the information avaliable you can send it to your database using two methods:
Using a HTML tag and making a request with javascript
Making a request with a custom image tag
On the past i ve just added the URL with parameters where you want the request to be made on an image tag and worked perfectly for me.
-- More info:
The custom image tag requests an image from a particular URL. The interesting part is that by making the request you’re actually transmitting information to a server. For example, if you request an image via URL https://www.example.com/something?parameter1=good&parameter2=123, the receiving server processes parameter1 and parameter2 and acts accordingly (e.g. registers those parameters as an event).
Source.

Javascript control page and user view page

Currently I'm working on a project where a user enters a lot of data constantly for a hour long window. I'm looking to have one user control all the data via some control panel and then have a link they can distribute to other users that will allow them to view that data without the ability to edit it.
Right now I'm doing some extremely weird methods. I have an XHR request on the control page that fires whenever a field is finished being edited. From there the data is sent to a php file that converts the data into a simple text file. Then the distributed link file will load that file one time and translate it into the necessary format.
Some potential problems I've run into are it seems odd that I'm sending starting as javascript data then going to a php file then to a text file then translating the data all the way back into javascript data again. Another problem I've come into is I'm not sure of a way to force users to reload the page when a field is edited in the control panel after the user has opened the view page.
Have I totally gone overboard here? What are some better concepts I could employ to accomplish this task?
If i understand what you want to do this is how i will do this:
First the data entry
if you have lot of fields you better use a form wizard, i don't have a particular one in mind right now but there is lot of them just search jQuery Form wizard
Here is an example:
http://i.stack.imgur.com/Luk2b.jpg
The concept of the form wizard is to guide user via multiple page and also validate the data. And click save when and the end.
Then save date in database.
Display content
All you need to do is to create a global separate page to display your content.
Let see something like: http://yourserver.com/view/{id}
where id is the identifier of the particular row in your database.
i'm not sure if i totally understand what u about to do. i'm trying to make your work description shorter here:
want to build a website that one person can edit a single page's content in 1 hour, and others can view the content change in that 1 hour.
if this is what u want to build, here's the module:
teacher: the one who can edit the page
student: the one who can only view the page
server: information center
teacher client edits page -> teacher client sends update data to server -> server saves data -> server sends update notice to student client -> student client receives update notice -> student fetches update data from server
to make this module work well, i suggest try socket instead of http reqeust, just like online games or IMs do.
well, try socket.io

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?

Javascript to input searches on multiple websites and take a screenshot

I am trying to automate the querying of names on 2 different websites. For each website I have to enter in the same name and take a screenshot of the results.I don't know how to approach this project. Is it possible to automate this with a javascript? Thank you for any input.
Website links are below:
[1] http://exclusions.oig.hhs.gov/search.aspx
[2] http://www.health.ny.gov/professionals/doctors/conduct/license_lookup.htm
You should be able to accomplish this with PhantomJS relatively easily. Check out the examples page - you'll probably want to use code evaluation to fill out and submit your forms, after which you can render the page to an image file.
You actually do this is one step: send a POST requests to the information you need. For the first example, you would send these POST data:
__VIEWSTATE=dDwtNzQ5MzEyMDI3Ozs%2BHWC8LXZfQQTCTJWtmudNLStjn%2Fk%3D&txtLastName1=test&txtFirstName1=&txtBusinessName1=&txtLastName2=&txtFirstName2=&txtBusinessName2=&txtLastName3=&txtFirstName3=&txtBusinessName3=&txtLastName4=&txtFirstName4=&txtBusinessName4=&txtLastName5=&txtFirstName5=&txtBusinessName5=&cmdSubmit=Search
So you can use PhantomJS, as suggested, with a POST request and take a screenshot. Or you can use a web service to create the screenshots. Unfortunately, very few allow POST requests with custom POST data. Browshot (see API) lets you send POST data and use a custom Referer. So your screenshot requests would include (after you encode the POST data):
url=http://exclusions.oig.hhs.gov/search.aspx&referer=http://exclusions.oig.hhs.gov/search.aspx&post_data=__VIEWSTATE%3DdDwtNzQ5MzEyMDI3Ozs%252BHWC8LXZfQQTCTJWtmudNLStjn%252Fk%253D%26txtLastName1%3Dtest%26txtFirstName1%3D%26txtBusinessName1%3D%26txtLastName2%3D%26txtFirstName2%3D%26txtBusinessName2%3D%26txtLastName3%3D%26txtFirstName3%3D%26txtBusinessName3%3D%26txtLastName4%3D%26txtFirstName4%3D%26txtBusinessName4%3D%26txtLastName5%3D%26txtFirstName5%3D%26txtBusinessName5%3D%26cmdSubmit%3DSearch
I have tested it, and do get a screenshot of the results, like if I filled out the form and submitted it.

Categories