Push Notification Custom Save Browser id in Database - javascript

hi i am newbie to php and javascript and i am working on a project of Push Notification for my website which will push a notification to the user when a news related to specific category is published on my website i am using following code and curl with the help of google documentation
<html>
<head>
<title>Push Notification codelab</title>
<link rel="manifest" href="manifest.json">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<h1>Push Notification codelab</h1>
<p>This page must be accessed using HTTPS or via localhost.</p>
<script src="js/main.js"></script>
<button id="send">Send</button>
<script>
$("#send").click(function() {
$.get("curl.php", function(data) {
console.log(data);
});
});
</script>
</body>
</html>
now i am wondering how to store a user's browser id or something so that it can send a notification to specific browser for specific category news.i am really looking forward to you guys to help me out for this problem.

there is nothing so-called as browser id, but you can generate a unique and store that in the _COOKIE, best combination of creating an unique id would be MD5(USER_AGENT . SALTMIX_STR . IPADDR), this combination will generate a unique id for each browser and you can store that in cookie using PHP eg. $_COOKIE["BROWSER_KEY"] = 'YOUR_UNIQUE_KEY'
EXAMPLE
<?php
$generateUniqueKey = md5($_SERVER['HTTP_USER_AGENT'].$_SERVER['REMOTE_ADDR']."!##zYp04)+");
$_COOKIE["BROWSER_KEY"] = $generateUniqueKey; //Sets a key
echo $_COOKIE["BROWSER_KEY"]; //retrieves the set key
?>

Related

How to $.post a js variable and store it to php for later use,similarly to LocalStorage?

In local storage,we store for example localStorage.setItem("test",$('#testinput').val());
And 2 years later,as long we have'nt cleared our browser's local storage we just ask for the key in LS and we get it back like this $('#testinput').val(localStorage.getItem("test"));
Now let's say (because LS is available only within one system and one browser) I want to store this particular data to a server-side PHP file, and have it available there to be accessed whenever I want, what would be the simplest and most common practice to do that based on my example and my snippet below*?
Should I store it in a PHP cookie?
Note that I have some familiarity with $.post and $.get with jquery, and concerning PHP I know as much as getting the request and send a response back, I just started learning.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
function storeVALUE() {
localStorage.setItem("test", $('#testinput').val());
}
function retrieveVALUE() {
$('#testinput').val(localStorage.getItem("test"));
}
</script>
</head>
<body>
<button onclick="storeVALUE()">STORE VALUE</button><button onclick="retrieveVALUE()">RETRIEVE VALUE</button>
<input id="testinput">
</body>
</html>
*SO snippets do not access LS, but you get the idea
if this is necessary with your code , you can store variable value using cookies in json format and later use it using $_COOKIE[$cookie_name]

GET in HTML and Not PHP

I want to process a GET extension in a HTML page and not a PHP page.
I have looked through the internet and not found anything.
URL = examplesite.com?id=1234
I assume this would go to the index page on the domain. As the index page is a HTML page, is there a way to get the details of the extension transferred to another link I have in the html script that emails me when someone looks at the site.
<script src="trigger.php">
</script>
This way I can customise the extension to know where the person found me. id=1234 is from twitter, id=2345 from FB etc.
Then i could place the extension onto the script to send me the email.
<script src="trigger.php?id=1234">
</script>
Is there a way to get the HTML page to process extension and pass it on in a variable of some sort.
Thanks in advance
Robert
You can do it in Javascript in the HTML. window.location.search contains the query string from the URL.
You can then use an AJAX request to send the query string to your server script.
<script>
$(document).ready(function() {
var script = 'trigger.php' + window.location.search;
$.get(script);
});
</script>
This is not possible with plain HTML. By definition, HTML is not dynamic. It can't process anything you want. However, there are three options.
Firstly, you can use JavaScript and AJAX calls to make another HTTP request to examplesite.com/processID.php (or another PHP page) which will process the request.
Another way to use JavaScript would be to use a client side API such as MailChimp to send the email directly from the users computer.
Or you could just redirect your root page for your domain examplesite.com to lead to index.php. I'm sure that's very easy to configure in mainstream servers such as Apache or Nginx. Otherwise please ask another question on Server Fault about how to set this up using your server.
If you are using a PHP hosting provider, they should also be able to help redirect the root page. If you don't have any access to PHP on your hosting provider, you're out of luck. You must only use the second option.
Do it with ajax
<form id="form1">
<input type="text" />
<button type="submit" id="sendforms">send</button>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sendforms").click(function() {
var combinedFormData = $("#form1").serialize();
$.get(
"trigger.php",
combinedFormData
).done(function(data) {
//alert("Successfully submitted!");
$("#result").html(data);
}).fail(function () {
//alert("Error submitting forms!");
})
});
});
</script>

Trouble getting data from Firebase database Node.js/JavaScript

Good morning everyone I'm having a little trouble with Firebase as a new user. In my previous question I asked how I could use my express server making API calls to pass that data retrieved into my firebase database and I was able to make it work! However, now I want to take that data from my database and use it to populate my DOM on the client side.
So we're clear this is how the work flow got my app goes:
Make an AJAX request from my client to my express app app.jssending a small data object {search: search} where the value for search is captured in a form on the client. (works)
Take that data object and make another AJAX request to the third party API, which returns another data object. (works)
Take that response object from the third party API and send that to my database. (works)
A script client-side pulls information from my database to populate the DOM. (not working)
Looking at the myriad of tutorials is tough and I'm following the guides I find exactly using some fine copy pasta, but I'm still stuck.
Here is the client side script firebaseData.js that I'm using to retrieve data from my database, I'm trying to get all the data at the endpoint [my database url]/user:
$(document).ready(function() {
// create object instance of my Firebase database
var myDBReference = new Firebase([my database url]);
console.log(myDBReference.child("user"))
});
And it returns this in the console client-side:
X {k: Ji, path: P, n: Ce, pc: false, then: undefined…}
And that's all I've been able to get so far. Below is my index.html where I link to firebase it's cdn and a bunch of other stuff I was just told to include in my project:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="top">
<h1>Just Trying to Make a Halo App</h1>
<form id="searchForm">
<input id="searchField" type="text"></input>
<input id="searchButton" type="submit" value="search"></input>
</form>
</div>
<div id="imageContainer">
<img id="emblem">
<img id="spartan">
</div>
<div id="dataContainer">
<h2></h2>
<p></p>
</div>
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "[my key value]",
authDomain: "[authDomain value]",
databaseURL: "[databaseURL value]",
storageBucket: "[storageBucket value",
};
firebase.initializeApp(config);
</script>
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="request.js"></script>
<script type="text/javascript" src="firebaseData.js"></script>
</body>
</html>
In actuality the var config object has all the correct information generated from the firebase console- I wish that's all I would need to fix this! Please let me know if you require any more information I'd be happy to provide it and thanks for taking the time to check out my question.
Happy Saturday!
myDBReference.child("user") is just the reference to where the data is stored. To actually retrieve the data you will need to work with .on() or .once(). I strongly recommend you to take some time reading firebase documentation for retrieving data.
firebase.database().ref().child("user").once('value', function(snapshot) {
if(snapshot.value()){
//logs everything that is under /user
console.log(snapshot.value());
}
});
Keep in mind that if you have many users under /root/user, after retrieving the whole branch you will need to iterate over them with:
snapshot.forEach(function(childSnap){
console.log(childSnap.val());
});
Update:
Since I see you are not working with any SPA framework such as Angular (with angularfire), if you want to display the data that you are retrieving from firebase you will need to work setting an element id and than call document.getElementById() inside your callback to manipulate it.
<p id="username"></p>
document.getElementById("username").value = snapshot.val();

API Management Portal Azure Template Restriction

I am calling an api and getting some values in json format now I want to restrict some user on client side based on the response I get from the api. for example if user is a guest then it haven't show the subscribe button otherwise it have. In developer portal we use DotLiquid view engine. Now i have one question how can i use this in dotliquid. here is my code where i use Jquery to get data and javascript to restrict the user on client side
Code
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script>
var root = 'https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false';
$(document).ready(function () {
var showData1;
$('#get-data').click(function () {
var showData;
jQuery.ajax({
url: "https://httpbin.org/get",
dataType:'json',
success:function(response)
{
$('#a').html(response.origin );
$('#b').html(response.url );
if(response.url=="https://httpbin.org/get"){
$("#a").fadeOut(1000);
}
}
});
showData.text('Loading the JSON file.');
});
});
</script>
<!DOCTYPE html>
Get JSON data
<div id="show-data"></div>
<p id="a"></p>
<p id="b"></p>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
I can't quite tell from your source code, but in the DotLiquid templates we use on the developer portal the template variables are fixed currently. Please add your feature request to have user variables in each template to our feedback portal http://aka.ms/apimwish

How am I able to get options which are set in options.html?

I read Google Chrome Extensions Developer's Guide carefully, it told me to save options in localStorage, but how is content_scripts able to get access to these options?
Sample:
I want to write a script for a couple of domains, and this script should share some options on these domains.
content_scripts:
//Runs on several domains
(function(){
var option=getOptions();
//Get options which have been set in options.html
if(option){
doSome();
}
})
option_page:
<html>
<head>
<title>My Test Extension Options</title>
</head>
<body>
option: <input id="option" type="text" /><br />
<input id="save" type="submit" /><br />
<span id="tips">option saved</span>
<script type="text/javascript">
(function(){
var input=document.getElementById('option');
var save=document.getElementById('save');
var tips=document.getElementById('tips');
input.value=localStorage.option||'';
// Here localStorage.option is what I want content_scripts to get.
function hideTips(){
tips.style.visibility='hidden';
}
function saveHandler(){
localStorage.option=input.value||'';
tips.style.visibility='visible';
setTimeout(hideTips,1000);
}
hideTips();
save.addEventListener('click',saveHandler);
})();
</script>
</body>
</html>
I would think you could use the chrome.extensions.* API to create a line of communication to a background page that is running under your extension ID, thus giving you local storage.
I think this is possible because the Content Script docs specify that the chrome.extensions* API's are available to content scripts. But I have never tried this.
You would then just have to send messages from the background page to the content script when a connection is made. You could even send one message with all the settings in a literal object.
Here is an example of creating two way communication I wrote about earlier. You could implement this or create a custom solution but I think this is how you would achieve what you are looking for.

Categories

Resources