Skip to main content

Tugas Web Programming, Membuat Web Aplikasi Sistem Informasi Karyawan

Tugas Web Programming, Membuat Web Aplikasi Sistem Informasi Karyawan

Ini tugas pertama membuat web aplikasi sistem informasi karyawan menggunakan framework codeigniter. Saya masih awam untuk bahasa pemrograman CI, jadi harus saya dokumentasikan setiap progress tugas web aplikasi sistem karyawan kali ini.

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'] = '';
Menambah bagian .htaccess

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

Masih di folder config kita akan merubah file autoload untuk membuka akses yang nantinya kita butuhkan 
$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


Untuk mengikuti tutorial ini saya menyarankan bagi teman-teman yang menggunakan visual studion install plugin auto renam tag. 




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


Nah setelah itu lakukan direct halaman setelah user Admin dan user Pegawai login. Dengan begitu nanti setiap akses memiliki tampilan yang berbeda. 


Comment Policy: Silahkan ketik kolom komentar dibawah ini, sesuai dengan topik pembahasan. Hubungi saya di halaman kontak jika ada kritik dan saran. Terima kasih.
Buka Komentar
Tutup Komentar