website profil sekolah dengan codeigniter dan twitter bootstrap2

Website Profil Sekolah dengan Codeigniter dan Twitter Bootstrap (Bag 1)

Selamat sore pemiarsa. Salam semangat super.. (motivator style).. Lamo tak jumpa dengan pengunjung setia blog saya tercinta ini, yak.. hahahaha. Yak, saya tidak akan lupa untuk memposting sesuatu di blog ini, karena saya telah berkomitmen, di tahun 2013 ini minimal 1 bulan ane harus posting 1 artikel di blog ini.. hahaha.. Komitmen lho, bukan nazarr kdi.. Yah, biar para pengunjung blog sekalian gak padajeleh(orang nJowo bilang) atau bosan, postingannya kok masih-masih itu aja.. Namun kenyataannya kemarin bulan Januari aja cuma ada 2 postingan, itupun hanya postingan cerita seputar cerita Ngampus ane, melalui media Kartun Ngampus yang saat ini pupyulerr.... (minimal di kampus ane..). Download karakternya di blog ini (http://shirongampus.blogspot.com/), gan. Juga kemarin Januari merupakan bulan tersibuk ane (Boxing Day), di semester 7, dihadapkan pada kewajiban menyelesaikan Kerja Praktek (KP) beserta laporannya. Syukur, saat detik ini saya saya memposting tulisan ini Laporan KP sudah diseminarkan, disetujui, disahkan oleh dosen pembimbing dan kaprodi... hehehe... tinggal lanjudh, take off ke semester 8.. hahah.. (salam semangat super, buat fren-freen ane yang belum maju KP, di Teknik Informatika STMIK El Rahma Yogyakarta Angkatan 2009. hehehee...

OK, gan.. bek to topik, sesuai judul di atas, ane mo mosting tentang membuat website profil pribadi, dengan menggunakanFramework Codeigniteryang populer sangath jagad persilatan web programming.Untuk desain, website profil ini saya percayakan padaTwitter Bootstraap. Itu lho, gan, sebuah framework CSS, yang memudahkan kita untuk mendesain tampilan sebuah website. Singkatnya gitu.. lebih lanjutnya bisa klik link-nya disitu, atauklik disini, untuk mencari tutorialnya...

Untuk Codeigniternya, ane anggap pemiarsa semua udah pada paham, yak...? Intinya dalam membuat website kita sendirikan menjadi 3 sub bagian pokok, yaitu Model (pengambilan data dari database), View (tampilan website) dan Controller (proses-proses yang dilakukan).

Yang pertama sekali dalam membuat website dengan Codeigniter adalah mengatur konfigurasi website, yang pengaturannya dilakukan di file "application/config/config.php". Settingannya yang PALING UTAMA (minimal) adalah sebagai berikut :

17. $config['base_url'] = 'http://localhost/web_sd/';227. $config['encryption_key'] = 'super90';

Penjelasan :Baris (17. $config['base_url'] = 'http://localhost/web_sd/';) digunakan untuk mengatur alamat root website yang kita buat. Dalam kasus ini, folder web Codeigniter saya saya beri nama "web_sd" dan saya letakkan di folder WWW (Wamp Server). Jadi kalau di tempat pemiarsa foldernya diberi nama beda dengan ini, maka konfigurasinya menjadi :

17. $config['base_url'] = 'http://localhost/nama_folder_web_anda/';

Baris (227. $config['encryption_key'] = 'super90';). Ini gini pemiarsa. Dalam website ini nantinya kan menggunakan yang namanya session. Nah, di Codeigniter (selanjutnya kita sebut CI, males ngetiknya), jika mengaktifkan session, maka settingan ini harus disetting. Valuenya bebas, terserah Anda, pemiarsa.

Itu untuk setting konfigurasi dasar website CI kita kali ini. Selanjutnya kita melangkah ke setting database-nya. Setting database ini dapat kita temui di file "application/config/database.php". Oh iya, jangan lupa buat database dulu dengan nama "web_sd". Selanjutnya settingannya yang PALING UTAMA, seperti ini pemiarsa :

51. $db['default']['hostname'] = 'localhost'; //sesuaikan dengan server MySQL Anda52.$db['default']['username'] = 'root'; // username mysql Anda53.$db['default']['password'] = ''; //password mysql Anda54.$db['default']['database'] = 'web_sd'; //kita sepakati, buat database dengan nama "web_sd"Untuk skrip import file SQLnya adalah sebagai berikut :

CREATE TABLE àdmin` ( ìd` int(1) NOT NULL auto_increment, ù` varchar(15) NOT NULL, `p` varchar(15) NOT NULL, `nama` varchar(30) NOT NULL, èmail` varchar(30) NOT NULL, `level` enum('1','2','3') NOT NULL, PRIMARY KEY (ìd`)) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

CREATE TABLE àgenda` ( ìd` int(3) NOT NULL auto_increment, `tgl` date NOT NULL, `ket` varchar(255) NOT NULL, `tempat` varchar(255) NOT NULL, PRIMARY KEY (ìd`)) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

CREATE TABLE `berita` ( ìd` int(4) NOT NULL auto_increment, `judul` varchar(255) NOT NULL, `gambar` varchar(100) NOT NULL, ìsi` mediumtext NOT NULL, `hits` int(4) NOT NULL, `tglPost` datetime NOT NULL, `kategori` varchar(75) NOT NULL, òleh` varchar(30) NOT NULL, `publish` int(1) NOT NULL, PRIMARY KEY (ìd`)) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=18 ;

CREATE TABLE `berita_komen` ( ìd` int(4) NOT NULL auto_increment, ìd_berita` int(4) NOT NULL, `nama` varchar(100) NOT NULL, èmail` varchar(100) NOT NULL, `komentar` varchar(250) NOT NULL, `tgl` datetime NOT NULL, PRIMARY KEY (ìd`)) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

CREATE TABLE `data_guru` ( ìd` int(3) NOT NULL auto_increment, `nama` varchar(100) NOT NULL, `nip` varchar(30) NOT NULL, `mapel` varchar(50) NOT NULL, `jk` enum('L','P') NOT NULL, àlamat` varchar(200) NOT NULL, `foto` varchar(150) NOT NULL, PRIMARY KEY (ìd`)) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

CREATE TABLE `data_siswa` ( ìd` int(3) NOT NULL auto_increment, `nama` varchar(100) NOT NULL, `nis` varchar(30) NOT NULL, `kelas` enum('1','2','3','4','5','6','L') NOT NULL, `jk` enum('L','P') NOT NULL, àlamat` varchar(200) NOT NULL, `foto` varchar(150) NOT NULL, PRIMARY KEY (ìd`)) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

CREATE TABLE `galeri` ( ìd` int(4) NOT NULL auto_increment, ìd_album` int(3) NOT NULL, `file` varchar(255) NOT NULL, `ket` varchar(255) NOT NULL, PRIMARY KEY (ìd`)) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

CREATE TABLE `galeri_album` ( ìd` int(3) NOT NULL auto_increment, `nama` varchar(100) NOT NULL, PRIMARY KEY (ìd`)) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

CREATE TABLE `haldep` ( ìsi` longtext NOT NULL, ìd` int(1) NOT NULL auto_increment, PRIMARY KEY (ìd`)) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

CREATE TABLE `link` ( ìd` int(3) NOT NULL auto_increment, `nama` varchar(150) NOT NULL, àlamat` varchar(150) NOT NULL, PRIMARY KEY (ìd`)) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

CREATE TABLE `pesan` ( ìd` int(4) NOT NULL auto_increment, `nama` varchar(100) NOT NULL, èmail` varchar(100) NOT NULL, `pesan` varchar(200) NOT NULL, `tgl` datetime NOT NULL, PRIMARY KEY (ìd`)) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

CREATE TABLE `poll` ( ìd` int(3) NOT NULL auto_increment, `tanya` varchar(255) NOT NULL, òp_1` varchar(200) NOT NULL, òp_2` varchar(200) NOT NULL, òp_3` varchar(200) NOT NULL, òp_4` varchar(200) NOT NULL, `j_1` int(3) NOT NULL, `j_2` int(3) NOT NULL, `j_3` int(3) NOT NULL, `j_4` int(3) NOT NULL, PRIMARY KEY (ìd`)) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

CREATE TABLE `profil` ( ìd` int(2) NOT NULL auto_increment, `judul` varchar(200) NOT NULL, ìsi` longtext NOT NULL, PRIMARY KEY (ìd`)) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

Jadi kita membuat 9 tabel, yaitu sebagai berikut :

1. admin: untuk menampung data username dan passwod login admin

2. agenda: untuk menyimpan data agenda kegiatan sekolah

3. berita: untuk menampung data berita website

4. berita_komen: untuk menampung data komentar berita website

5. data_guru: untuk menampung data guru

6. data_siswa: untuk menampung data siswa

7. galeri: untuk menyimpan data foto-foto di galeri foto

8. galeri_album: untuk menyimpan data albumd alam galeri foto

9. haldep: untuk menampung data page halaman beranda website

10. link: untuk menyimpan data link atau tautan dari website

11. pesan: untuk menampun data kontak masuk melalui web

12. poll: untuk menampung data polling

13. profil: untuk menampung data profil sekolah

OK, pemiarsa nampaknya ane untuk bagian 1 cukup sampe di sini, yak. Langkah yang sudah kita lakukan adalah :

1. Mengatur konfigurasi website (file : "application/config/config.php")

2. Mengatur konfigurasi database website (file : "application/config/database.php")

3. Membuat database, dengan 9 tabel. Jika kesulitan meliat skrip SQL di atas, bisa didownload,DISINI.Pilih yang "web_sd.sql"

4. (Bag 2) Pembuatan Template Website - Website Profil Sekolah dengan Codeigniter dan Twitter Bootstrap5. Template Website...? Ya, ini adalah sebuah bahasa Inggris. Menurut kamus besar bahasa google 4 juta milliar (teringat kamus bahasa inggris SMP-ku dulu 4 milliar, loh gan) itu arti dari kata Template sendiri adalah Contoh (diakses pada tanggal 20/04/2013, pukul 09.41). Nah loh, gak begitu nyambung, yak. Ane cari lagi, di google, arti kata template, buat menemukan arti sebenarnya yang mudah dimengerti dari kata template ini. Nah, akhirnya dapet yang begitu nyambung, arti dari template website adalah sebuah desain tampilan halaman dengan berisikan dokumen file model-model tambahan yang dikodekan dalam bahasa program dan siap pakai.

Itu kiranya pengertian template website. Klo ane ambil kesimpulan dari setiap ane membikin template adalah : membuat desain tampilan sebuah halaman web utama/utuh, yang dalam penggunaannya nanti ada salah satu bagian yang akan diisi oleh konten-konten dari website atau intinya bagian tertentu itu berubah-ubah... (kira-kira begitu, komandan). Lihat gambar dibawah ini :Tapi dalam konteks ini, sesuai judulnya, kita akan memanfaatkan sebuah framework CSS Twitter Bootstrap, yang pengertiannya sudah dijelaskan dalam bagian pertama bahasan ini. Insya Alloh, Twitter bootstrap ini sudah mengadopsi teknologi yang bersifat responsive design, HTML5, dan CSS3.

6.

7.

Banyak cara mecari template website ini, salah satunya dengan mendownload template gratis yang banyak bertebaran di internet. Untuk akhir-akhir ini template yang paling populer adalah template yang bersifat responsive design atau template tersebut bisa menyesuaikan layar device user/pengunjungnya. Secara, hari gini, banyak orang yg mengakses lewat Smartphone, Tablet, Kapsul (eh.. ora, lho), Blackberry, dll (yang satupun ane kagak punya, lho gan.. HP ane, tipe Nokia 103 dan Motorolla WX-193, -- sebuah pengakuan jujur, lho ini, hahaha). Trus yang ngetren lagi yang sudah HTML5 dan CSS 3, yang merupakan teknologi pemrograman web statis saat ini (2013). Hehe.

OK, langsung saja. Pada pembuatan website ini kita akan membuat template dengan 2 kolom utama (kolom 2: sidebar, klom 3: konten), header (nomor 1), footer (4), seperti gambar di bawah ini :

8.

9. Kita akan membuat templatenya dengan menggunakan twitter bootstrapnya. Langsung saja, karena saya tidak menjelaskannya satu-persatu, panjang bener, gan.. sumpah, maka akan langsung saya sertakan dalam file download di bawah ini.

10. Simpan file tersebut dengan nama index.html. Nah jika dibuka, makan belum menghasilkan template jadi, melainkan hanya menampilkan tampilan acak-acakan dan gak beraturan. Itu karena file CSS dan Javascript dari Twitter bootstrapnya belum kita sertakan. Buatlah sebuah folder dengan nama aset yang berfungsi untuk menyimpan file CSS dan Javascript dari Twitter Bootstrapnya.

11. Selanjutnya buka folder ekstrakan dari hasil download Twitter bootstrapnya. Buka folder :

12. twitter-bootstraps/docs/assets/, akan didapatkan 4 folder seperti ini :

13.

14. Untuk folder img itu banyak terdapat file yang sebenarnya tidak perlu, nah kita hapus saja file tersebut. Buka folder img tersebut, dan hapus beberapa file, dan sisakan hanya file-file berikut ini (file-file image intinya twitter bootstrap):

15.

16. Kemudian balik ke folder assets , dan copykan semua foldernya (css, ico, js, dan img) ke folder aset di folder template yang kita buat tadi. Ilustrasinya seperti ini :

17.

18. Nah, sekarang buka file index.html tersebut, maka akan ditampilkan template kita sudah jadi, dan akan seperti ini :

19.

20. Mungkin agak berbeda dengan punya saya. Ada gambar yang tak tampil, dan lain sebagainya. Untuk gambar, itu nanti bisa diperbaiki sendiri, yak. Trus mungkin berbeda dengan punya saya yang ada warna biru-birunya, itu karena punya saya sudah saya ubah sedemikian rupa di file aset/css/bootstrap.css-nya. OK, sekian dulu untuk bahasan untuk Pembuatan Template dengan framework CSS , Twitter Bootstrap kali ini, akan kita lanjutkan di bahasan selanjutnya, yaitu mengisikan template ke Codeigniternya. Hehehe.. Untuk file template jadinya, bisa didownload di link berikut ini :

website profil sekolah dengan codeigniter dan twitter bootstrap2

Documents