Perancangan Sistem

  1. Tahap Perancangan Sistem

Sebelum membangun suatu sistem, hal pertama kali yang harus dilakukan adalah merancang sebuah sistem yang matang sehingga sistem yang dihasilkan akan lebih baik dan sesuai dengan tujuan dan keinginan. Di dalam tahap ini menggambarkan perancangan sistem dengan menggunakan UML:

  1. Use Case Diagram

Gambar 4. 1 Use Case Diagram

Keterangan:

  1. Guru Login untuk masuk ke dalam sistem lalu guru dapat:
  • Menginput data penilaian
  • Mengelola data penilaian
  • Melihat data penilaian

 

  1. Siswa Login untuk masuk ke dalam sistem lalu siswa dapat:

    Melihat data penilaian.

  2. Activity Diagram

    4.1.2.1    Activity Login

Gambar 4. 2 Activity Login

Activity diagram di atas menggambarkan proses login yaitu, dari user mengakses Sistem Informasi Pendidikan, lalu sistem akan menampilkan form login yang harus diisi oleh username dan password, sistem pun akan mengecek data login jika data itu benar maka akan masuk ke dalam sistem apabila data login salah, user akan menerima pesan kesalahan dan mengulangi login.

 

  1. Activity Input

Gambar 4. 3 Activity Input

Activity diagram di atas menggambarkan proses input data nilai yaitu, mulai user mengklik tombol input, lalu sistem akan menampilkan form input yang harus diisi oleh user berdasarkan nama siswa dan keterangan datanya, sistem pun akan mengecek data input dari user jika data itu benar maka akan masuk ke dalam sistem dan disimpan, lalu apabila data input salah, user akan menerima pesan kesalahan dan mengulangi proses penginputan.

4.1.2.3    Activity Kelola

Gambar 4. 4 Activity Kelola

Activity diagram di atas menggambarkan proses kelola data penilaian yaitu, mulai user mengklik tombol kelola data, lalu sistem akan menampilkan form kelola data yang harus diisi oleh user, sistem pun akan mengecek data dari form kelola yang di isi oleh user, jika data itu benar maka akan masuk ke dalam sistem dan disimpan, lalu apabila data salah maka user akan menerima pesan kesalahan dan mengulangi proses pengelolaan data.

4.1.2.4    Activity Lihat

Gambar 4. 5 Activity Lihat

Activity diagram di atas menggambarkan proses lihat data nilai yaitu, mulai user mengklik data nilai, lalu sistem akan mengecek data nilai yang akan ditampilkan, jika data itu cocok maka akan tampil data nilai yang diinginkan.

4.1.3    Sequence Diagram

4.1.3.1    Sequence Login

Gambar 4. 6 Sequence Login

Keterangan Sequence Login:

  1. User mengakses / klik Sistem Informasi Pendidikan
  2. Menampilkan form untuk login
  3. User mengisi Username & Password
  4. Sistem mengecek dan memvalidasi data
  5. Tampil pesan kesalahan jika data tidak cocok
  6. Sistem mengambil data jika data cocok
  7. Mengecek data login di database
  8. Login OK

    4.1.3.2    Sequence Input

Gambar 4. 7 Sequence Input

Keterangan Sequence Input:

  1. User mengakses / klik Sistem Informasi Pendidikan
  2. Menampilkan form untuk login
  3. User mengisi Username & Password
  4. Sistem mengecek dan memvalidasi data
  5. Tampil pesan kesalahan jika data tidak cocok
  6. Sistem mengambil data jika data cocok
  7. Mengecek data input di database
  8. Data OK
  9. Menampilkan form input

 

4.1.3.3    Sequence Kelola

Gambar 4. 8 Sequence Kelola

Keterangan Sequence Kelola Data Pendidikan:

  1. User Mengklik Kelola data
  2. Sistem menampilkan form kelola data
  3. User dapat mengedit data guru
  4. User dapat mengedit data mata pelajaran
  5. User dapat mengedit data siswa

 

  1. Sistem memvalidasi data
  2. Menampilkan pesan kesalahan jika ada data yang tidak cocok
  3. Sistem mengamil data kelola jika data cocok
  4. Melakukan update data
  5. Data ok
  6. Kembali tampil ke halaman kelola data penilaian

    4.1.3.4    Sequence Lihat

Gambar 4. 9 Sequence Lihat

Keterangan Sequence Lihat Data Pendidikan:

  1. User mengklik data penilaian
  2. Sistem menampilkan form data penilaian
  3. Sistem mengambil data penilaian dari database
  4. Data Ok
  5. Menampilkan data penilaian kepada user

 

4.1.4    Class Diagram

Gambar 4. 10 Class Diagram

 

4.2    Tahap pembuatan aplikasi

Pada tahap pembuatan aplikasi ini, dijelaskan dari mulai tahap pembuatan database dan dilanjutkan ke tahap implementasi dan pengujian aplikasi.

4.2.1    Pembuatan database

Setelah menginstall web server XAMPP, selanjutnya membuat database di server MySQL dengan menggunakan PHP MyAdmin, pertama buat nama untuk nama database tersebut, langkah selanjutnya jalankan Servis Webserver dan MySql Servis, setelah semua dijalankanlangkah selanjutnya buka web browser, ke alamat http://localhost/phpmyadmin/ dan tampilan yang akan muncul:

Gambar 4. 11 Php Myadmin

Berikut contoh langkah pembuatan database yang digunakan pada Sistem Informasi Pendidikan SMA Darussalam:

  1. Pada gambar di atas untuk membuat database, isikan nama database yang akan dibuat pada bagian Create new database, Nilai (tidak boleh ada spasi), lalu klik tombol Create.
  2. Maka akan terbentuk sebuah database dengan nama: nilai, Setelah membuat database, langkah selanjutnya adalah membuat tabel di dalam database tersebut dengan cara mengisikan nama tabel dan jumlah field di bagian Create new table on database nilai, misalnya Name: nilai dan Fields: 4, lalu klik tombol Go. Lihat gambar di bawah:

Gambar 4. 12 Membuat Tabel

  1. Kemudian isikan field-field beserta atribut lainnya seperti pada gambar dibawah:

Gambar 4. 13 Mengisi Field dan Atribut

  1. Setelah selesai, klik tombol Save, maka akan terbentuk sebuah tabel dengan nama: absensi beserta field-field didalamnya. Hasilnya dapat di lihat pada gambar di bawah ini:

Gambar 4. 14 Tampilan tabel

Tipe-tipe data yang sering digunakan adalah:

  1. INT, untuk menyatakan data berupa angka.
  2. VARCHAR, untuk menyatakan data berupa karakter atau string (batasnya sampai 255 karakter).
  3. DATE, untuk menyatakan data berupa tanggal.
  4. TIME, untuk menyatakan data berupa waktu.
  5. TEXT, untuk menyatakan data berupa karakter dalam jumlah yang banyak (lebih dari 255 karakter), misalnya untuk isi berita dan pesan.
    1. Implementasi Aplikasi

Perangkat keras yang digunakan dalam pembangunan sistem ini yaitu sebuah Note Book yang digunakan sebagai Server beserta client. Berikut spesifikasinya:

  • Processor Intel (R) Pentium (R) CPU
  • Hardisk 1.00 GB
  • Memory (757 MB usable)
  • VGA Card 32
  • CDROM minimal 52x
  • Color Monitor 15 inci
  • Keyboard dan Mouse

    Berikut adalah sistem informasi yang digunakan dalam proses perancangan perangkat lunak ini:

    • Windows 7 Ultimate
      • PHP sebagai bahasa pemrograman web
      • MySQL sebagai database servernya
      • Macromedia Dreamweaver 8 sebagai editor
      • Star UML sebagai alat bantu desain pemodelan sistem UML
      • Microsoft word 2013 sebagai alat bantu pembuatan laporan
      • Adobe Photoshop CS3 dan Corel Draw sebagai desain tampilan
      • Browser Mozilla Firefox sebagai lingkungan aplikasi.

 

  1. Ujicoba aplikasi

Sistem Informasi Pendidikan yang dibangun akan mengacu pada pemodelan yang telah dibuat dengan menggunakan UML pada bab sebelumnya.

Untuk tampilan awal dari Sistem Informasi Pendidikan adalah Form Login, login untuk admin (admin.php)

Gambar 4. 15 Form Login Admin

Jika login yang di masukan valid akan masuk ke form home admin (proseslogin.php)

Gambar 4. 16 Form Menu Admin

Jika admin memilih “Input Data Nilai” maka akan masuk ke form Input Nilai (inputguru.php)

Gambar 4. 17 Form Input Nilai Admin

Jika admin memilih “Lihat Data Nilai” maka akan masuk ke form Lihat Nilai (bing.php)

Gambar 4. 18 Form Lihat Nilai Admin

 

Lalu pilih menu yang akan di input, maka akan tampil form contoh mata pelajaran Inggris (bing.php)

Gambar 4. 19 Form Input Admin

Dan hasilnya bisa dilihat seperti ini (nilai_inggris.php)

Gambar 4. 20 Hasil Akhir Nilai

 

jika admin ingin menambah user siswa maka dapat memilih menu “regristasi user” dan akan tampil form seperti berikut: (registrasi.php)

Gambar 4. 21 Registrasi User oleh Admin

dan jika admin keluar akan tampil Form logout (logout.php)


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s