Timetable 'AngularJS'

timetable

Pada tutorial kali ini saya akan membahas bagaimana caranya membuat tabel jadwal seperti gambar di atas menggunakan AngularJS. Tabel ini juga di implementasikan pada sistem erabelajar.com untuk menunjukan jadwal yang tersedia pada guru.

profile era belajar

Pada kolom berisi hari-hari dalam seminggu, dan pada row berisi waktu dalam 12 jam. Dan kotak hijau merupakan tanda yang akan kita bedakan dengan css.

Ok, langsung saja setelah kita membuat file index.html pada folder project, pastikan kita telah menyisipkan framework AngularJS pada project. Kita ketikan kode ini di dalam tag <head> pada project

<script src="http://code.angularjs.org/1.2.12/angular.js"></script>  

Setelah itu kita akan membuat sebuah module dengan AngularJS, module agar lebih di pahami di ibaratkan dengan sebuah container yang dapat membungkus fitur-fitur yang terdapat pada applikasi kita seperti controller, directives, filter, services, dll.

Buat tag <script> di akhir aplikasi sebelum tag tutup body </body>, lalu di dalam tag tersebut kita buat sebuah module yang bernama myApp

angular.module('myApp', []);  

Lalu buat sebuah controller yang bernama table dengan parameter function $scope

angular.module('myApp').controller('table', ['$scope', function($scope){}]);  

Controller adalah tempat di mana data di sisipkan pada AngularJS dan kode-kode yang bersifat logic, sedangkan scope adalah sebuah object dalam aplikasi yang dapat menghubungkan view dan controller, bisa di sebut juga dengan varibel pada AngularJS.

Kita akan membuat data dengan struktur json di bawah ini, yang akan kita sisipkan pada program

{
    "time": "waktu-dalam-12-jam", 
    "days": [{
        "hari": "hari-dalam-seminggu",
        "status": "status-mengajar"
     }]
}

Time di isi dengan jam, dalam hal ini dari jam 9:00 sampai jam 21:00, dan hari adalah 7 hari dalam seminggu dari mulai senin sampai minggu, status adalah ketersediaan jadwal yang ingin di tandai, jika tersedia maka akan di isi dengan available jika tidak maka akan di biarkan sebagai string kosong.

Data ini akan kita tempatkan pada controller table pada variabel $scope.timetable

Untuk contoh jadwal yang ingin di tandai adalah hari senin pukul 9:00. Sehingga data kita akan menjadi seperti ini

angular.module('myApp').controller('table', ['$scope', function($scope){  
    $scope.timestamp = [
        {
            "time": "09:00", 
            "days": [
                {
                    "hari": "Senin",
                    "status": "available"
                },
                {
                    "hari": "Selasa",
                    "status": ""
                },
                {
                    "hari": "Rabu",
                    "status": ""
                },
                {
                    "hari": "Kamis",
                    "status": ""
                },
                {
                    "hari": "Jumat",
                    "status": ""
                },
                {
                    "hari": "Sabtu",
                    "status": ""
                },
                {
                    "hari": "Minggu",
                    "status": ""
                }
            ]
        }, 
        {
            "time": "10:00", 
            "days": [
                {
                    "hari": "Senin",
                    "status": ""
                },
                {
                    "hari": "Selasa",
                    "status": ""
                },
                {
                    "hari": "Rabu",
                    "status": ""
                },
                {
                    "hari": "Kamis",
                    "status": ""
                },
                {
                    "hari": "Jumat",
                    "status": ""
                },
                {
                    "hari": "Sabtu",
                    "status": ""
                },
                {
                    "hari": "Minggu",
                    "status": ""
                }
            ]
        }
// lanjutkan sampai pukul 21:00 dengan format yang sama

    ];
}]);

Jika ingin menambahkan ketersediaan jadwal isi field "status" dengan "available" pada hari dan jam yang di inginkan.

Setelah itu kita akan membuat table pada file html dengan mengimplementasikan module, controller, dan data $scope.timetable yang sudah kita buat.

<div ng-app="myApp">  
        <div ng-controller="table">
            <table>
                <thead>
                    <tr>
                        <th>&nbsp;</th>
                        <th>Senin</th>
                        <th>Selasa</th>
                        <th>Rabu</th>
                        <th>Kamis</th>
                        <th>Jumat</th>
                        <th>Sabtu</th>
                        <th>Minggu</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="a in timestamp">
                        <th>{{a.time}}</th>
                        <td ng-repeat="b in a.days" class="{{b.status}}"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

Ng-app di gunakan untuk meload module myApp, ng-controller di gunakan untuk meload controller table yang sudah kita buat sebelumnya.

Ng-repeat di gunakan untuk meload data pada object $scope.timetable, pertama kita akan me-loop time

<tr ng-repeat="a in timestamp">  
     <th>{{a.time}}</th>
</tr>  

Sebelum tag tutup tr </tr>, kita akan me-loop data available yang sudah kita tandai pada "status" dan kita sisipkan pada atribut class, agar kita bisa membedakannya nanti jadwal yang sudah kita tandai dengan css.

<td ng-repeat="b in a.days" class="{{b.status}}"></td>  

Terakhir, kita tandai warna yang sudah di beri tanda dalam class available dengan css. Buat tag <link> di dalam tag <head>. Dan ketik kode berikut

.available {
    background-color: #8BC34A;
}

Kita tandai class tersebut dengan atribut background color hijau.

Refresh project pada browser dan lihat hasilnya.

Ok sekian tutorial membuat timetable menggunakan AngularJS kali ini, file project ini bisa di dapatkan di Github Era Belajar. Semoga bermanfaat.

Eka Prasasti

Chief Technology Officer of Era Belajar (PT Ridaka Indonesia Cerdas). Leads IT team about vision technology in Era Belajar. Multi-skilling ability is the result of many professional experinces.