Commit 9d538805 authored by Tarsvini's avatar Tarsvini

add lab_8

parent c2a33ec2
Pipeline #14597314 failed with stages
in 2 minutes and 38 seconds
No preview for this file type
......@@ -6,7 +6,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="LAB 5">
<meta name="description" content="LAB 7">
<meta name="author" content="{{author}}">
<!-- bootstrap csss -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
......
......@@ -13,7 +13,7 @@
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- LINK INTO table, and link into home#form -->
<li><a href="{% url 'lab-7:index' %}#friend-list">Add Friend</a></li>
<li><a href="{% url 'lab-7:get-friend-list' %}#friend-list">Friends</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
......
from django.conf.urls import url
from .views import index, add_friend, friend_list,validate_npm,delete_friend, friend_list_json
from .views import index, add_friend, friend_list,validate_npm,delete_friend,friend_list_json
urlpatterns = [
url(r'^$', index, name='index'),
......
// FB initiation function
window.fbAsyncInit = () => {
FB.init({
appId : '{your app id}',
cookie : true,
xfbml : true,
version : '{your api version}'
});
// implement a function that check login status (getLoginStatus)
// and run render function below, with a boolean true as a paramater if
// login status has been connected
// This is done because when the user opened the web and the user has been logged in,
// it will automatically display the logged in view
FB.getLoginStatus(function(response){
console.log("status : "+ response['status']);
render(response['status']==='connected');
});
};
// Facebook call init. default from facebook
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Render function, receive a loginFlag paramater that decide whether
// render or create a html view for the logged in user or not
// Modify this method as needed if you feel you need to change the style using
// Bootstrap's classes or your own implemented CSS
const render = loginFlag => {
if (loginFlag) {
// If the logged in view the one that will be rendered
// Call getUserData method (see below) that have been implemented by you with a callback function
// that receive user object as a parameter.
// This user object is the response from an API facebook call.
getUserData(user => {
// Render profile view, post input form, post status button, and logout button
$('#lab8').html(
'<div class="profile">' +
'<img class="cover" src="' + user.cover.source + '" alt="cover" />' +
'<img class="picture" src="' + user.picture.data.url + '" alt="profpic" />' +
'<div class="data">' +
'<h1>' + user.name + '</h1>' +
'<h2>' + user.about + '</h2>' +
'<h3>' + user.email + ' - ' + user.gender + '</h3>' +
'</div>' +
'</div>' +
'<input id="postInput" type="text" class="post" placeholder="Ketik Status Anda" />' +
'<button class="postStatus" onclick="postStatus()">Post ke Facebook</button>' +
'<button class="logout" onclick="facebookLogout()">Logout</button>'
);
// After renderin the above view, get home feed data from the logged in account
// by calling getUserFeed method which you implement yourself.
// That method has to receive a callback parameter, which receive a feed object as a response
// from calling the Facebook API
$('#lab8').append("<div class='container' id='feeds'></div>");
getUserFeed(feed => {
feed.data.map(value => {
// Render the feed, customize as needed.
let id = "'" + value.id + "'";
if (value.message && value.story) {
$('#feeds').append(
'<div class="feed">' +
'<h1>' + value.message + '</h1>' +
'<h2>' + value.story + '</h2>' +
'<button class="deletePost" onclick="deleteFeed(' + id + ')">Delete</button>'+
'</div>'
);
} else if (value.message) {
$('#feeds').append(
'<div class="feed">' +
'<h1>' + value.message + '</h1>' +
'<button class="deletePost" onclick="deleteFeed(' + id + ')">Delete</button>'+
'</div>'
);
} else if (value.story) {
$('#feeds').append(
'<div class="feed">' +
'<h2>' + value.story + '</h2>' +
'<button class="deletePost" onclick="deleteFeed(' + id + ')">Delete</button>'+
'</div>'
);
}
});
});
});
} else {
// The view when not logged in yet
$('#lab8').html('<button class="login" onclick="facebookLogin()">Login</button>');
}
};
const facebookLogin = () => {
// TODO: Implement this method
// Make sure this method receive a callback function that will call the render function
// that will render logged in view after successfully logged in,
// and this function has all needed permissions at the above scope.
// You can modify facebookLogin function above
FB.login(response =>{
render(true);
},{scope:'public_profile,email,user_about_me,user_posts.publish_actions'});
};
const facebookLogout = () => {
// TODO: Implement this method
// Make sure this method receive a callback function that will call the render function
// that will render not logged in view after successfully logged out.
// You can modify facebookLogout function above
FB.logout(response =>{
render(false);
});
};
// TODO: Complete this method
// This method modify the above getUserData method that receive a callback function called fun
// and the request user data from the logged in account with all the needed fields in render method,
// and call that callback function after doing the request and forward the response to that callback function.
// What does it mean by a callback function?
const getUserData = (fun) => {
...
FB.api('/me?fields=....', 'GET', function (response){
fun(response);
});
...
};
const getUserFeed = (fun) => {
// TODO: Implement this method
// Make sure this method receive a callback function parameter and do a data request to Home Feed from
// the logged in account with all the needed fields in render method, and call that callback function
// after doing the request and forward the response to that callback function.
FB.api(
"/me/feed",
function(response){
if(response && !response.error){
fun(response):
}
}
)
};
const postFeed = (message) => {
// Todo: Implement this method,
// Make sure this method receive a string message parameter and do a POST request to Feed
// by going through Facebook API with a string message parameter as a message.
FB.api(
"/me/feed",
"POST",
{
"message": message
};
function(response){
console.log(response);
if(response && !reponse.error){
location.reload();
}
}
)
}
const deleteFeed =(id) =>{
FB.api(
id,
"DELETE",
function (response){
if(response && !response.error){
location.reload();
}
}
);
}
const postStatus = () => {
const message = $('#postInput').val();
postFeed(message);
};
{% extends "lab_8/layout/base.html" %}
{% load static %}
{% block content %}
<div id="lab8" class='container'>
<button onclick="facebookLogin()">Login with Facebook</button>
</div>
{% endblock %}
{% load staticfiles %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="LAB 8">
<meta name="author" content="{{author}}">
<!-- bootstrap csss -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700">
<link rel="stylesheet" href="{% static 'css/lab_8.css' %}">
<title>
{% block title %} Lab 8 {% endblock %}
</title>
</head>
<body>
<header>
{% include "lab_8/partials/header.html" %}
</header>
<content>
{% block content %}
<!-- content goes here -->
{% endblock %}
</content>
<footer>
<!-- TODO Block Footer dan include footer.html -->
{% block footer %}
{% include "lab_8/partials/footer.html" %}
{% endblock %}
</footer>
<!-- Jquery n Bootstrap Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="application/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{% block javascript %}
<script src="{% static 'js/lab_8.js' %}"></script>
{% endblock %}
</body>
</html>
from django.test import TestCase
from django.test import Client
from django.urls import resolve
# Create your tests here.
class lab8Test(TestCase):
def test_lab_8_url_is_exist(self):
response = Client().get('/lab-8/')
self.assertEqual(response.status_code,200)
# def test_lab_8_using index_func(self):
# found=resolve('/lab-8/')
# self.assertEqual(found.func,index)
\ No newline at end of file
from django.conf.urls import url
from .views import index
urlpatterns = [
url(r'^$', index, name='index'),
]
from django.shortcuts import render
# Create your views here.
response={}
def index(request):
return render(request, 'lab_8/lab_8.html',response)
\ No newline at end of file
......@@ -23,6 +23,7 @@ import lab_4.urls as lab_4
import lab_5.urls as lab_5
import lab_6.urls as lab_6
import lab_7.urls as lab_7
import lab_8.urls as lab_8
from lab_1.views import index as index_lab1
from django.views.generic.base import RedirectView
......@@ -39,4 +40,5 @@ urlpatterns = [
url(r'^lab-5/', include(lab_5, namespace='lab-5')),
url(r'^lab-6/', include(lab_6, namespace='lab-6')),
url(r'^lab-7/', include(lab_7, namespace='lab-7')),
url(r'^lab-8/', include(lab_8, namespace='lab-8')),
]
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment