Tugas Web Programming, Membuat Web Aplikasi Sistem Informasi Karyawan

Kebetulan tugas ini berkelompok, kurang lebih ada 5 orang untuk mengerjakan tugas web programming. Jadi kami harus bagi-bagi tugas, dan merencanakan apa saja yang akan di aplikasikan dalam sistem.

Persiapan yang kami lakukan

• Mendownload framework Codeigniter
• Download AdminLTE

Nah pada saat masih baru menginstall Codeigniter, ritual pertama kali yaitu merubah bagian folder config/config.php

$config[‘base_url’] = ‘http://localhost/u-login/’;

dan rubah juga bagian index page

$config[‘index_page’] = ”;

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

$autoload[‘libraries’] = array(‘database’,’email’,’session’);

$autoload[‘helper’] = array(‘url’,’file’,’security’);

Untuk koneksi database nanti kita bahas di artikel selanjutnya.

Untuk tampilan pertama kita harus membuat halaman utama baru. Karena ketika pertama kali instalasi Codeigniter, halaman utamanya terdapat welcome_message. Jadi kita akan mengubah terlebih dahulu halaman ini.

1. Membuat Halaman Utama Baru

1. Pembuatan Halaman Login Admin dan User 

Copy halaman template login di admin LTE

localhost/admintemplate/pages/examples/login.html

Sesuaikan bagian-bagian js dan css

 <link rel=”stylesheet” href=”<?= base_url(‘assets/’); ?>plugins/fontawesome-free/css/all.min.css”>

Pada base url ini, memanggil folder dengan melengkapi url bawaan

<?= base_url(‘assets/’); ?>  

Pastikan semua telah diubah agar tampilan login rapi.

Nah setelah tampilan rapi kurang lebih, seperti ini gambar login aplikasi simpeg (sistem informasi pegawai).

Lakukan penyesuaian gambar dengan mengganti ukuran

Lakukan penyesuaian juga untuk form email

<div class=”form-group”>
<input type=”text” class=”form-control form-control-user” id=”email” name=”email” placeholder=”Enter Email Address…”>
</div

Input type nya dirumah menjadi text dimaksudkan agar nanti disesuaikan oleh codeigniter bukan lagi dari perintah html.

jangan lupa juga untuk menambah name agar form dapat dibaca oleh php.

<button type=”submit” class=”btn btn-primary btn-user btn-block”>
Login
</button>

 Lakukan perubahan juga pada link submit menjadi button.

<a href=”index.html” class=”btn btn-google btn-user btn-block”>
<i class=”fab fa-google fa-fw”></i> Login with Google
</a>
<a href=”index.html” class=”btn btn-facebook btn-user btn-block”>
<i class=”fab fa-facebook-f fa-fw”></i> Login with Facebook
</a>

Hapus juga pada bagian ini. Karena kami tidak menginginkan login menggunakan sosmed.

2. Pembuatan Database Login Admin dan User Simpeg

Agar kita dapat memberikan akses ke halaman dashboard apliksi. Tentu kita juga harus mempersiapkan database user yang akan digunakan.

Jadi kami akan membuat sebuah database dengan nama db_simpeg. Database ini akan menjadi media penyimpanan data web aplikasi sistem informasi pegawai.

Kemudian kita lanjut membuat table, yang akan kita buat di dalam db_simpeg. Dengan nama table user, yang berisi id, name, email, password, role_id, tanggal aktif.

Kurang lebih jadinya seperti pada gambar dibawah ini.

Setelah pembuatan table selesai, kita harus membuat data user dan admin sistem informasi pegawai sesuai dengan aksesnya.

Dengan begitu kita dapat memberikan tampilan dashboard yang berbeda antara admin dan user.

3. Mengatur direct Halaman Dashboard user Admin dan user Pegawai