Skip to content

Commit a7fe4b5

Browse files
arifkhriarifkhri
committedOct 26, 2016
initial commit
0 parents  commit a7fe4b5

13 files changed

+40466
-0
lines changed
 

‎index.html

+192
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
<html lang="en" >
2+
<head>
3+
<title>Angular Study</title>
4+
<meta name="viewport" content="width=device-width, initial-scale=1">
5+
<!-- cdn bootstrap -->
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
7+
<!-- custom css -->
8+
<style type="text/css">
9+
10+
</style>
11+
<!-- end css -->
12+
<script src="js/angular.js"></script>
13+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
14+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
15+
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.8/angular-resource.js"></script> -->
16+
</head>
17+
<body ng-app="employees" ng-controller="employeesCtrl">
18+
<div class="container">
19+
<div class="row">
20+
<h3>Input Employees</h3>
21+
<div class="col-xs-5">
22+
<form>
23+
<div class="form-group">
24+
<input type="text" class="form-control" placeholder="Name" ng-model="employee.name">
25+
</div>
26+
<div class="form-group">
27+
<input type="text" class="form-control" placeholder="Address" ng-model="employee.address">
28+
</div>
29+
<div class="form-group">
30+
<input type="text" class="form-control" placeholder="Birthday" ng-model="employee.birthday">
31+
</div>
32+
<div class="form-group">
33+
<div class="dropdown">
34+
<a class="dropdown-toggle" id="dropdown2" role="button" data-toggle="dropdown" data-target="#" href="#">
35+
<div class="input-group"><input type="text" class="form-control" data-ng-model="data.dateDropDownInput"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
36+
</div>
37+
</a>
38+
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
39+
<datetimepicker data-ng-model="data.dateDropDownInput" data-datetimepicker-config="{ dropdownSelector: '#dropdown2' }"/>
40+
</ul>
41+
</div>
42+
</div>
43+
<div class="form-group">
44+
<input type="text" class="form-control" placeholder="Gender" ng-model="employee.gender">
45+
</div>
46+
<div class="form-group">
47+
<input type="text" class="form-control" placeholder="Email" ng-model="employee.email">
48+
</div>
49+
<button ng-click="save(employee)" class="btn btn-primary">Create Employee </button>
50+
<button ng-click="index()" class="btn btn-primary">List Employee</button>
51+
</form>
52+
<div>{{ employees.message }}</div>
53+
</div>
54+
<div class="col-xs-7">
55+
<table class="table table-hover">
56+
<thead>
57+
<tr>
58+
<th width="50px">ID</th>
59+
<th width="150px">Name</th>
60+
<th width="150px">Email</th>
61+
<th width="150px">Action</th>
62+
</tr>
63+
</thead>
64+
<tbody style="text-align: center;">
65+
<tr ng-repeat="employee in employees">
66+
<td>{{ employee.id }}</td>
67+
<td>{{ employee.name }}</td>
68+
<td>{{ employee.address }}</td>
69+
<td>
70+
<button ng-click="show(employee.id)" class="btn btn-info btn-s" data-toggle="modal" data-target="#myModal">
71+
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
72+
</button>
73+
<button ng-click="edit(employee.id)" class="btn btn-warning btn-s" data-toggle="modal" data-target="#myModal_edit">
74+
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
75+
</button>
76+
<button ng-click="delete(employee.id)" class="btn btn-danger btn-s">
77+
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
78+
</button>
79+
</td>
80+
</tr>
81+
</tbody>
82+
</table>
83+
</div>
84+
</div>
85+
</div>
86+
<!-- Button trigger modal -->
87+
<!-- <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
88+
Launch demo modal
89+
</button> -->
90+
91+
<!-- Modal -->
92+
<!-- Modal Detail -->
93+
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
94+
<div class="modal-dialog" role="document">
95+
<div class="modal-content">
96+
<div class="modal-header">
97+
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
98+
<h4 class="modal-title" id="myModalLabel">Detail Employee</h4>
99+
</div>
100+
<div class="modal-body">
101+
<table class="table table-hover" border="0">
102+
<tr><td>ID</td><td>{{ employees.employee.id }}</td></tr>
103+
<tr><td>Name</td><td>{{ employees.employee.name }}</td></tr>
104+
<tr><td>Birthday</td><td>{{ employees.employee.birthday }}</td></tr>
105+
<tr><td>Gender</td><td>{{ employees.employee.gender }}</td></tr>
106+
<tr><td>Email</td><td>{{ employees.employee.email }}</td></tr>
107+
<tr><td>Address</td><td>{{ employees.employee.address }}</td></tr>
108+
</table>
109+
</div>
110+
<div class="modal-footer">
111+
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
112+
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
113+
</div>
114+
</div>
115+
</div>
116+
</div>
117+
<!-- Modal Edit -->
118+
<div class="modal fade" id="myModal_edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
119+
<div class="modal-dialog" role="document">
120+
<div class="modal-content">
121+
<div class="modal-header">
122+
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
123+
<h4 class="modal-title" id="myModalLabel">Detail Employee</h4>
124+
</div>
125+
<div class="modal-body">
126+
<form>
127+
<div class="form-group">
128+
<input type="text" class="form-control" placeholder="Name" ng-model="employees.employee.name">
129+
</div>
130+
<div class="form-group">
131+
<input type="text" class="form-control" placeholder="Address" ng-model="employees.employee.address">
132+
</div>
133+
<div class="form-group">
134+
<input type="text" class="form-control" placeholder="Birthday" ng-model="employees.employee.birthday">
135+
</div>
136+
<!-- <div class="form-group">
137+
<div class="dropdown">
138+
<a class="dropdown-toggle" id="dropdown2" role="button" data-toggle="dropdown" data-target="#" href="#">
139+
<div class="input-group"><input type="text" class="form-control" data-ng-model="data.dateDropDownInput"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
140+
</div>
141+
</a>
142+
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
143+
<datetimepicker data-ng-model="data.dateDropDownInput" data-datetimepicker-config="{ dropdownSelector: '#dropdown2' }"/>
144+
</ul>
145+
</div>
146+
</div> -->
147+
<div class="form-group">
148+
<input type="text" class="form-control" placeholder="Gender" ng-model="employees.employee.gender">
149+
<!-- <div class="checkbox">
150+
<label>
151+
<input type="checkbox" name="male" ng-model="employees.employee.gender">Pria
152+
<input type="checkbox" name="female" ng-model="employees.employee.gender"> Wanita
153+
</label>
154+
</div> -->
155+
</div>
156+
<div class="form-group">
157+
<input type="text" class="form-control" placeholder="Email" ng-model="employees.employee.email">
158+
</div>
159+
<button ng-click="update(employees.employee.id)" class="btn btn-primary">Update</button>
160+
</form>
161+
162+
</div>
163+
<div class="modal-footer">
164+
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
165+
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
166+
</div>
167+
</div>
168+
</div>
169+
</div>
170+
<!-- js http get url serve -->
171+
<script src="js/module-http.js" type="text/javascript"></script>
172+
<!-- end http -->
173+
<!-- <script src="js/routes.js" type="text/javascript"></script> -->
174+
<!-- Your application bootstrap -->
175+
<script type="text/javascript">
176+
// js call modal
177+
$('#myModal').on('shown.bs.modal', function () {
178+
$('#myInput').focus()
179+
})
180+
181+
// js dtpicker
182+
// $( function() {
183+
// $( "#datepicker" ).datepicker({
184+
// changeMonth: true,
185+
// changeYear: true,
186+
// dateFormat: 'yy/mm/dd'
187+
// });
188+
// } );
189+
190+
</script>
191+
</body>
192+
</html>

‎js/angular-resource.js

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
var app = angular.module('module_crudapi', ['ngResource']);
2+
app.factory('Bycycle', function($resource) {
3+
//auth error server "\xA4" ASCII-8BIT to UTF-8
4+
//fails convert from ascii to utf
5+
//use window.btoa() , this method will Creates a base-64 encoded ASCII string from a "string" of binary data
6+
//because in api server only know this encode (if send via header)
7+
var auth = window.btoa("dwikuntobayu" + ':' + "12345678");
8+
var base_url = 'http://localhost:3003/';
9+
10+
function resRequest(methodType, subDomain) {
11+
return {
12+
method : methodType,
13+
url : base_url + subDomain,
14+
isArray : false,
15+
headers : {
16+
'Authorization' : 'Basic ' + auth,
17+
'Accept' : 'application/json',
18+
'Content-Type' : 'application/json; charset=UTF-8',
19+
'Access-Control-Allow-Headers' : 'Origin, X-Requested-With, Content-Type, Accept'
20+
},
21+
22+
params : {
23+
id : '@id',
24+
name : '@name',
25+
series : '@series'
26+
}
27+
};
28+
}
29+
30+
31+
return $resource('', {}, {
32+
'index' : resRequest('GET', 'api/v1/bycycles'),
33+
'show' : resRequest('GET', 'api/v1/bycycles/:id'),
34+
'save' : resRequest('POST', 'api/v1/bycycles'),
35+
'update' : resRequest('PUT', 'api/v1/bycycles/:id'),
36+
'destroy' : resRequest('DELETE', 'api/v1/bycycles/:id'),
37+
});
38+
});
39+
40+
//// create controller that injected services
41+
var app_bycycle = angular.module('bycycle_module', ['module_crudapi']);
42+
app_bycycle.controller('bycycle_controller', function($scope, Bycycle) {
43+
$scope.bycycle = {};
44+
$scope.save_bycycle = function() {
45+
$scope.bycycles = Bycycle.save({
46+
id : $scope.bycycle.name,
47+
name : $scope.bycycle.name,
48+
series : $scope.bycycle.series
49+
});
50+
};
51+
$scope.list_bycycles = function() {
52+
$scope.bycycles = Bycycle.index();
53+
};
54+
$scope.show_bycycle = function() {
55+
$scope.bycycles = Bycycle.show({
56+
id : $scope.bycycle.id
57+
});
58+
};
59+
$scope.update_bycycle = function() {
60+
$scope.bycycles = Bycycle.update({
61+
id : $scope.bycycle.id,
62+
name : $scope.bycycle.name,
63+
series : $scope.bycycle.series
64+
});
65+
};
66+
$scope.delete_bycycle = function() {
67+
if ($scope.bycycle.id == null) {
68+
$scope.bycycle.id = 0;
69+
}
70+
$scope.bycycles = Bycycle.destroy({
71+
id : $scope.bycycle.id
72+
});
73+
};
74+
});

0 commit comments

Comments
 (0)