Skip to content

Commit 0d8c44f

Browse files
MaxwellEnemuoMaxwellEnemuo
committed
frontend with GET and POST
1 parent c3ded21 commit 0d8c44f

File tree

7 files changed

+293
-150
lines changed

7 files changed

+293
-150
lines changed

Diff for: ‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
jtest.js

Diff for: ‎ajaxCall.html

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
9+
<script src="ajaxCall.js"></script>
10+
11+
<style>
12+
body {
13+
text-align: center;
14+
font-family: "Helvetica", sans-serif;
15+
}
16+
h1 {
17+
font-size: 2em;
18+
font-weight: bold;
19+
}
20+
.box {
21+
border-radius: 5px;
22+
background-color: #eee;
23+
padding: 20px 5px;
24+
}
25+
button {
26+
color: white;
27+
background-color: #4791d0;
28+
border-radius: 5px;
29+
border: 1px solid #4791d0;
30+
padding: 5px 10px 8px 10px;
31+
}
32+
button:hover {
33+
background-color: #0F5897;
34+
border: 1px solid #0F5897;
35+
}
36+
</style>
37+
</head>
38+
<body>
39+
40+
<div style="float:left; width:50%;">
41+
<h1>Data Finder</h1>
42+
<p class="message box"> The message will go here </p>
43+
<p><button id="getMessage"> Get Message </button></p>
44+
</div>
45+
46+
47+
<div style="float:right; width:50%;">
48+
<h1>Data Sender</h1>
49+
<form id="apiform">
50+
51+
<input type="text" name="title" placeholder="title" autocomplete="on" ><br>
52+
<textarea name="body" id="" cols="30" rows="10" placeholder="body" autocomplete="on" ></textarea><br>
53+
<input type="text" name="author" placeholder="author" autocomplete="on" ><br>
54+
<input type="text" name="category_id" placeholder="category_id" autocomplete="on" ><br><br>
55+
56+
<button id="postMessage"> Post Message </button>
57+
</form>
58+
</div>
59+
60+
61+
</body>
62+
</html>
63+
64+
65+
66+
67+
68+

Diff for: ‎ajaxCall.js

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
2+
3+
$(document).ready(function(){
4+
$('#postMessage').click(function(){
5+
// e.preventDefault();
6+
7+
var url = $('form').serialize();
8+
9+
function getUrlVars(url) {
10+
var hash;
11+
var myJson = {};
12+
var hashes = url.slice(url.indexOf('?') + 1).split('&');
13+
for (var i = 0; i < hashes.length; i++) {
14+
hash = hashes[i].split('=');
15+
myJson[hash[0]] = hash[1];
16+
}
17+
return JSON.stringify(myJson);
18+
}
19+
20+
var pp = getUrlVars(url);
21+
// alert(pp);
22+
23+
$.ajax({
24+
type:"POST",
25+
url: "/Work folders/OOP php/RESTFUL traversy/php_rest_myblog/api/post/create.php",
26+
data: pp,
27+
ContentType:"application/json",
28+
29+
success:function(){
30+
alert('successfully posted');
31+
},
32+
error:function(){
33+
alert('Could not be posted');
34+
}
35+
36+
});
37+
});
38+
});
39+
// document.addEventListener('DOMContentLoaded',function(){
40+
// document.getElementById('postMessage').onclick=function(e){
41+
42+
// e.preventDefault();
43+
// var chapman = {
44+
// "title":"Let's do this",
45+
// "body":"boomer",
46+
// "author":"sai kosuri",
47+
// "category_id":"4"
48+
// }
49+
50+
// var bon = JSON.stringify(chapman);
51+
// req=new XMLHttpRequest();
52+
// req.open("POST", '/Work folders/OOP php/RESTFUL traversy/php_rest_myblog/api/post/create.php', true);
53+
// req.setRequestHeader('Content-Type','application/json');
54+
// req.onreadystatechange=function(){
55+
56+
// if(req.readyState==4 && req.status==200){
57+
// alert('Submission was successful');
58+
// }else{
59+
// alert('Could not post data');
60+
// }
61+
62+
// };
63+
// req.send(bon);
64+
// }
65+
66+
// });
67+
68+
69+
document.addEventListener('DOMContentLoaded',function(){
70+
document.getElementById('getMessage').onclick=function(){
71+
// Add your code below this line
72+
req=new XMLHttpRequest();
73+
req.open("GET", '/Work folders/OOP php/RESTFUL traversy/php_rest_myblog/api/post/read.php',true);
74+
req.send();
75+
76+
req.onload=function(){
77+
var json=JSON.parse(req.responseText);
78+
79+
var son = json.filter(function(val) {
80+
return (val.id >= 11);
81+
});
82+
83+
var html = "";
84+
85+
son.forEach(function(val) {
86+
var keys = Object.keys(val);
87+
88+
html += "<div class = 'cat'>";
89+
keys.forEach(function(key) {
90+
html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
91+
});
92+
html += "</div><br>";
93+
});
94+
95+
document.getElementsByClassName('message')[0].innerHTML=html;
96+
// document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);
97+
};
98+
};
99+
});
100+

Diff for: ‎api/category/read.php

+19-18
Original file line numberDiff line numberDiff line change
@@ -15,33 +15,34 @@
1515

1616
// Category read query
1717
$result = $category->read();
18+
1819
// Get row count
1920
$num = $result->rowCount();
2021

2122
// Check if any categories
2223
if($num > 0) {
23-
// Cat array
24-
$cat_arr = array();
25-
$cat_arr['data'] = array();
24+
// Cat array
25+
$cat_arr = array();
26+
$cat_arr['data'] = array();
2627

27-
while($row = $result->fetch(PDO::FETCH_ASSOC)) {
28-
extract($row);
28+
while($row = $result->fetch(PDO::FETCH_ASSOC)) {
29+
extract($row);
2930

30-
$cat_item = array(
31-
'id' => $id,
32-
'name' => $name
33-
);
31+
$cat_item = array(
32+
'id' => $id,
33+
'name' => $name
34+
);
3435

35-
// Push to "data"
36-
array_push($cat_arr['data'], $cat_item);
37-
}
36+
// Push to "data"
37+
array_push($cat_arr['data'], $cat_item);
38+
}
3839

39-
// Turn to JSON & output
40-
echo json_encode($cat_arr);
40+
// Turn to JSON & output
41+
echo json_encode($cat_arr);
4142

4243
} else {
43-
// No Categories
44-
echo json_encode(
45-
array('message' => 'No Categories Found')
46-
);
44+
// No Categories
45+
echo json_encode(
46+
array('message' => 'No Categories Found')
47+
);
4748
}

Diff for: ‎api/post/read.php

+3-2
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
if($num > 0) {
2323
// Post array
2424
$posts_arr = array();
25-
$posts_arr['data'] = array();
25+
// $posts_arr['data'] = array();
2626

2727
while($row = $result->fetch(PDO::FETCH_ASSOC)) {
2828
extract($row);
@@ -37,7 +37,8 @@
3737
);
3838

3939
// Push to "data"
40-
array_push($posts_arr['data'], $post_item);
40+
array_push($posts_arr, $post_item);
41+
// array_push($posts_arr['data'], $post_item);
4142
}
4243

4344
// Turn to JSON & output

Diff for: ‎config/Database.php

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
class Database {
33
// DB Params
44
private $host = 'localhost';
5-
private $db_name = 'YOURDBNAME';
6-
private $username = 'YOURUSERNAME';
7-
private $password = 'YOURPASSWORD';
5+
private $db_name = 'myblog';
6+
private $username = 'root';
7+
private $password = '';
88
private $conn;
99

1010
// DB Connect

0 commit comments

Comments
 (0)