Perancangan Website MTs Plus An-Nuur

Oleh Hizrian Aldo (A2.1100137) TI-VIC

Deskripsi

MTs An-Nuur yang bergerak di bidang pendidikan, berkeinginan untuk mengenalakan MTs Plus An-Nuur kepada masyarakat luas dengan menggunakan media teknologi. Untuk mengenalakan MTs Plus An-Nuur biasanya hanya menggunakan brosur, yang area penyebarannya tidak terlalu jauh sehingga hanya daerah tertentu saja yang terjangkau area promosinya dan itupun tidak semua daerah dapat terjangkau.

Maka berdasarkan analisa tersebut diperlukan sebuah Website yang kiranya dapat membantu mempromosikan MTs Plus An-Nuur dengan tidak hanya menggunakan brosur saja.

Berikut adalah perancangannya:

Perancangan UML

1. Use Case Diagram

Diagram use case atau use case diagram menyajikan interaksi antara use case dan aktor. Aktor dapat berupa orang, peralatan atau system lain yang berinteraksi dengan system yang sedang dibangun. Use case menggambarkan fungsionalitas system atau persyaratan-persyaratan yang harus dipenuhi system dari pandangan pemakai.

Gambar Use Case Diagram

Dalam use case diagram terdapat 2 aktor yaitu Admin dan Pengunjung, admin bertugas mengelola sistem yang terdapat dalam website tersebut, sedangkan pengunjung hanya bisa melihat website, mendapat informasi website, dan selain itu juga pengunjung juga bisa memberi kritik dan saran pada website tersebut.

2. Class Diagram

Diagram class atau class diagram menunjukan interaksi antar kelas dalam system. Kelas mengandung informasi dan tingkah laku (behavior) yang berkaitan dengan informasi tersebut. Sebuah kelas pada diagram kelas dibuat untuk setiap tipe objek pada diagram sequensial.

Gambar Class Diagram

3. Activity Diagram
Aktivity diagram menggambarkan fungsionalitas system. Diagram aktivitas ini digunakan untuk menunjukan aliran kerja, kemudian dapat juga dikerjakan untuk menggambarkan aliran kejadian dalam use case. Aktivitas dalam diagram dipresentasikan dengan bentuk bujur sangkar bersudut tidak lancip, yang didalamnya berisi langkah-langkah apa saja yang terjadi dalam aliran kerja. Ada sebuah keadaan mulai (start state) yang menunjukan dimulainya aliran kerja, dan sebuah keadaan selesai (end state) yang menunjukan akhir diagram, titik keputusan dipresentasikan dengan bentuk diamond.

Activity diagram Login admin

Activity diagram Admin mengisi profil sekolah

Activity diagram Admin menghapus profil sekolah

Activity diagram Admin mengisi menu fasilitas sekolah

Activity diagram Admin menghapus fasilitas sekolah

Activity diagram Admin mengisi menu kegiatan sekolah

Activity diagram Admin menghapus fasilitas sekolah

Activity diagram Admin mengisi menu fitur sekolah

Activity diagram Admin menghapus fasilitas sekolah

Activity diagram pengunjung mengakses website sekolah

4.Sequence Diagram

Sequence Diagram adalah diagram interkasi yang disusun berdasarkan urutan waktu. Sequence Diagram digunakan untuk menunjukan aliran fungsionalitas dalam use case. Setiap diagram sequence merepresentasikan satu aliran dari beberapa aliran didalam use case. Masing-masing obyek memiliki lifeline, digambarkan dengan garis putus-putus secara vertikal dibawah obyek. Sebuah pesan digambarkan antara lifeline dari dua obyek untuk menunjukkan bahwa dua obyek tersebut berkomunikasi. Setiap pesan menggambarkan satu obyek memanggil fungsi tertentu dari obyek lainnya. Kemudian pesan-pesan ini didefinisikan sebagai operasi untuk sebuah kelas, setiap pesan dapat menjadi sebuah operasi.

Sequence Diagram Admin login

Sequence Diagram Admin menambah data profil sekolah

Sequence Diagram Admin menghapus data profil sekolah

Sequence Diagram Admin menambah data fasilitas sekolah

Sequence Diagram Admin menghapus data fasilitas sekolah

Sequence Diagram Admin menambah data kegiatan sekolah

Sequence Diagram Admin menghapus data kegiatan sekolah

Sequence Diagram Admin menambah data fitur sekolah

Sequence Diagram Admin menghapus data fitur sekolah

Sequence Diagram pengunjung melihat profil sekolah

Sequence Diagram pengunjung melihat fasilitas sekolah pada website

Sequence Diagram pengunjung melihat kegiatan sekolah pada website

Sequence Diagram pengunjung melihat fitur sekolah pada website

5. Statechart Diagram

statechart diagram merupakan model perilaku yang dinamis dari class secara individual maupun beberapa bentuk dari obyek. Semua itu menunjukkan deretan dari state yang dilakukan obyek melalui event yang menyebabkan sebuah transisi dari satu ke aktifitas yang lain, dan beberapa aksi yang menghasilkan dari satu state atau aktifitas yang berubah.