Мой файл index.html, где я вызываю функцию SendRequest ()
index.jsp файл, в котором хранится функция SendRequest ()
Я создаю веб-приложение, которое позволит пользователям отправлять запросы на трек DJ в ночном клубе.
По сути, я понятия не имею, почему код не работает сейчас, я просто пытаюсь добавить объект JSON в мою базу данных Firebase, которая является базой данных noSQL.
Когда вы нажимаете кнопку «Отправить запрос», он должен отправить запрос песни в файле index.js, используя функцию SendRequest().
Я понятия не имею, почему это не будет писать, я уверен, что все на месте. Я использую Atom.IO для разработки.
// code for writing to firbase comes from this YouTube Tutorial
// https://www.youtube.com/watch?v=WacqhiI-g_o
function SendRequest(){
var int = 3;
//path to db
const firebaseRef = firebase.database();
//path to noSQL db
const requests = firebaseRef.ref().child('Requests');
//set unique Identifyer
const primaryKey = str(int);
requests.child(primaryKey).set({
TrackName:"Keep Rollin", // values
Artist: "Limp Biscuit",
Genre:"Rock/Rap"
});
int =+ 1;
}
//.JSON object structure
// {
// "Requests":{ // <-- .JSON Object
// "3":{ // <-- unique key
// "TrackName":"Keep Rollin", // values
// "Artist": "Limp Biscuit",
// "Genre":"Rock/Rap"
}
}
}
<!DOCTYPE html>
<html>
<title>DJuke Box</title>
<!-- Css from: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_mobile_sidebar -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-teal.css">
<body style="max-width:600px">
<nav class="w3-sidebar w3-bar-block w3-card" id="mySidebar">
<div class="w3-container w3-theme-d2">
<span onclick="closeSidebar()" class="w3-button w3-display-topright w3-large">X</span>
<br>
<div class="w3-padding w3-center">
<img class="w3-circle" src="img_avatar.jpg" alt="avatar" style="width:75%">
</div>
</div>
<a class="w3-bar-item w3-button" href="RequestListDJ.html">View Requests</a>
<a class="w3-bar-item w3-button" href="#"></a>
<a class="w3-bar-item w3-button" href="#"></a>
</nav>
<header class="w3-bar w3-card w3-theme">
<button class="w3-bar-item w3-button w3-xxxlarge w3-hover-theme" onclick="openSidebar()">☰</button>
<h1 class="w3-bar-item" id="fireHeading">Request A track</h1>
</header>
<body>
<!-- Initialize firebase -->
<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase.js"></script>
<script>
//setting up reading adnd writing to firebase comes form the following
// YouTube Tutorial: https://www.youtube.com/watch?v=F6UWb9FNnj4&index=3&list=PLGCjwl1RrtcRTbJ9WBL9exbUFNqwzz9if
var config = {
apiKey: "AIzaSyB_RCn-T5vuWJRVGmzYOdcEg25ZSl2YkVQ",
authDomain: "djukebox2.firebaseapp.com",
databaseURL: "https://djukebox2.firebaseio.com",
projectId: "djukebox2",
storageBucket: "djukebox2.appspot.com",
messagingSenderId: "557303434968"
};
firebase.initializeApp(config);
</script>
<script src="index.js"></script>
<!-- Input Track request -->
Track Name: <input type="text" id="InputTrack" > <br>
Artist Name: <input type="text" id="InputArtist" > <br>
Genre: <input type="text" id="InputGenre" > <br>
<button id="SubmitBtn" onclick="SendRequest()">Send Request</button>
<footer class="w3-container w3-theme w3-margin-top">
<h3>Footer</h3>
</footer>
<script>
//close sidebar
closeSidebar();
function openSidebar() {
document.getElementById("mySidebar").style.display = "block";
}
function closeSidebar() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
</body>