Skip to content

Commit acc9a25

Browse files
bradtraversybradtraversy
authored
Merge pull request #2 from MayNaura/simple_frontend
frontend with GET and POST
2 parents c3ded21 + a2856cd commit acc9a25

File tree

7 files changed

+274
-150
lines changed

7 files changed

+274
-150
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
jtest.js

‎ajaxCall.html

Lines changed: 68 additions & 0 deletions
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+

‎ajaxCall.js

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
2+
//POST REQUEST
3+
4+
$(document).ready(function(){
5+
$('#postMessage').click(function(e){
6+
e.preventDefault();
7+
8+
//serialize form data
9+
var url = $('form').serialize();
10+
11+
//function to turn url to an object
12+
function getUrlVars(url) {
13+
var hash;
14+
var myJson = {};
15+
var hashes = url.slice(url.indexOf('?') + 1).split('&');
16+
for (var i = 0; i < hashes.length; i++) {
17+
hash = hashes[i].split('=');
18+
myJson[hash[0]] = hash[1];
19+
}
20+
return JSON.stringify(myJson);
21+
}
22+
23+
//pass serialized data to function
24+
var test = getUrlVars(url);
25+
26+
//post with ajax
27+
$.ajax({
28+
type:"POST",
29+
url: "/Work folders/OOP php/RESTFUL traversy/php_rest_myblog/api/post/create.php",
30+
data: test,
31+
ContentType:"application/json",
32+
33+
success:function(){
34+
alert('successfully posted');
35+
},
36+
error:function(){
37+
alert('Could not be posted');
38+
}
39+
40+
});
41+
});
42+
});
43+
44+
45+
//GET REQUEST
46+
47+
document.addEventListener('DOMContentLoaded',function(){
48+
document.getElementById('getMessage').onclick=function(){
49+
50+
var req;
51+
req=new XMLHttpRequest();
52+
req.open("GET", '/Work folders/OOP php/RESTFUL traversy/php_rest_myblog/api/post/read.php',true);
53+
req.send();
54+
55+
req.onload=function(){
56+
var json=JSON.parse(req.responseText);
57+
58+
//limit data called
59+
var son = json.filter(function(val) {
60+
return (val.id >= 4);
61+
});
62+
63+
var html = "";
64+
65+
//loop and display data
66+
son.forEach(function(val) {
67+
var keys = Object.keys(val);
68+
69+
html += "<div class = 'cat'>";
70+
keys.forEach(function(key) {
71+
html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
72+
});
73+
html += "</div><br>";
74+
});
75+
76+
//append in message class
77+
document.getElementsByClassName('message')[0].innerHTML=html;
78+
};
79+
};
80+
});
81+

‎api/category/read.php

Lines changed: 19 additions & 18 deletions
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
}

‎api/post/read.php

Lines changed: 3 additions & 2 deletions
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

‎config/Database.php

Lines changed: 3 additions & 3 deletions
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)