Home » » Membuat Aplikasi Waktu Sholat Dengan HTML5 dan Angular JS

Membuat Aplikasi Waktu Sholat Dengan HTML5 dan Angular JS

Posted by Catatan Wong Awam on Sunday 2 July 2017

angularjsSelamat malam, sambil santai malam malam gini saya coba iseng belajar angular dengan membuat sebuah aplikasi yang sederhana. hal yang pertama kita lakukan adalah

1. Membuat tag HTML seperti biasa
2. Melakukan include libarary bootstrap dan angular

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

Script di atas kita sisipkan pada tag head atau di bawah tag title.

3. Pada tag <body> sisipkan script berikut :

<div class="main" ng-app="sholatTimeApps" ng-controller="sholatController">
<div class="alert alert-danger" ng-if="error"><!--variable ng-if ini di gunakan untuk kondisional, jika terjadi error maka akan menampilkan eror yang terjadi-->
 <strong>Perhatian!</strong> {{error}}
</div>
<button class="btn btn-info" ng-click="waktu()"><!--fungsi ng-click="waktu()" ini digunakan untuk memberikan fungsi button yang jika di click akan memanggil fungsi waktu-->
<span class="glyphicon glyphicon-calendar"></span> Tampilkan Waktu Shalat
</button>
<hr class="colorgraph">
<div class="tampil" ng-if="alamat">{{alamat}}</div><!--untuk menampilkan variabel dalam Angular selalu di tuliskan diantara double kurawal {{}}-->
<div class="waktu" ng-if="tampil">
<center>
<table border="1">
<tr>
<td>Tanggal</td>
<td><?php echo date('d F Y',time());?></td>
</tr>
<tr>
<td>Subuh</td>
<td>{{subuh}}</td>
</tr>
<tr>
<td>Dhuhur</td>
<td>{{dhuhur}}</td>
</tr>
<tr>
<td>Asar</td>
<td>{{asar}}</td>
</tr>
<tr>
<td>Maghrib</td>
<td>{{maghrib}}</td>
</tr>
<tr>
<td>Isya</td>
<td>{{isha}}</td>
</tr>
</table>
</center>

</div>
<hr class="colorgraph">

<div class="footer"></div>

4. Setelah itu, kita buka tag <sciript> lalu sisipkan script angularnya.
var app = angular.module('sholatTimeApps', []);//inisiasi nama App dan juga nama module-module yang dipakai
app.controller('sholatController', function($scope, $http) {//di sini akan di deklarasikan controller

//fungsi waktu. Semua variabel pada angular harus diletakkan pada objek $scope supaya dapat diakses pada template. Isi dari fungsi ini untuk menemukan lokasi. Jika lokasi ditemukan akan memanggil fungsi showPosition
$scope.waktu=function(){
if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition($scope.showPosition);
} else {
$scope.error="Lokasi tidak ditemukan. Cek koneksi Internet anda";
 
}
}

$scope.showPosition=function(position){
lat=position.coords.latitude;
long=position.coords.longitude;
var d = new Date();
var n = Math.floor((new Date).getTime()/1000);
$http.get("http://api.aladhan.com/timings/"+n+"?latitude="+lat+"&longitude="+long+"&timezonestring=Asia/Jakarta&method=3")
 .success(function (response) {
 
  var latlon = lat + "," + long;
  if(response.code == 200){
  $scope.tampil =true;
  $scope.subuh=response.data.timings.Fajr;
  $scope.dhuhur=response.data.timings.Dhuhr;
  $scope.asar=response.data.timings.Asr;
  $scope.maghrib=response.data.timings.Maghrib;
  $scope.isha=response.data.timings.Isha;
 
 
  }
  //fungsi dari API Google untuk menampilkan lokasi kita
  $http.get("http://maps.googleapis.com/maps/api/geocode/json?latlng="+latlon+"&sensor=true")
  .success(function (address){
  $scope.alamat='Lokasi Anda: '+address.results[0].formatted_address;
    })
 });

}


});

untuk penjelasan, ada di setiap baris comment script di atas, atau jika teman teman ada yang mau langusng coba projectnya silahkan download di di sini, mohon maaf bila ada kekurangan dan kesalahan semoga bermanfaat.



sumber : http://mimiubay.blogspot.co.id/2015/09/tutorial-membuat-aplikasi-waktu-shalat.html



0 comments:

Post a Comment

Translate

.comment-content a {display: none;}