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 20 ! ini minimal bulan ane harus posting artikel di blog ini.. hahaha.. "omitmen lho, bukan na#arr kdi.. Yah, biar para pengunjung blog sekalian gak pada jeleh (orang n$o%o bilang) atau bosan, postingannya kok masih&masih itu aja.. 'amun kenyataannya kemarin bulan $anuari aja cuma ada 2 postingan, itupun hanya postingan cerita seputar cerita 'gampus ane, melalui media "artun 'gampus yang saat ini pupyulerr.... (minimal di kampus ane..). (o%nload karakternya di blog ini (http)**shirongampus.blogspot.com*), gan. $uga kemarin $anuari merupakan bulan tersibuk ane (+o,ing (ay), di semester -, dihadapkan pada ke%ajiban menyelesaikan "erja .raktek (".) beserta laporannya. Syukur, saat detik ini saya saya memposting tulisan ini Laporan ". sudah diseminarkan, disetujui, disahkan oleh dosen pembimbing dan kaprodi... hehehe... tinggal lanjudh, take o// ke semester 0.. hahah.. (salam semangat super, buat /ren&/reen ane yang belum maju "., di 1eknik 2n/ormatika S132" 4l 5ahma Yogyakarta 6ngkatan 2007. hehehee...

8", gan.. bek to topik, sesuai judul di atas, ane mo mosting tentang membuat %ebsite pro/il pribadi, dengan menggunakan Framework Codeigniter yang populer sangath jagad persilatan %eb programming. 9ntuk desain, %ebsite pro/il ini saya percayakan pada Twitter Bootstraap. 2tu lho, gan, sebuah /rame%ork :SS, yang memudahkan kita untuk

mendesain tampilan sebuah %ebsite. Singkatnya gitu.. lebih lanjutnya bisa klik link&nya disitu, atau klik disini, untuk mencari tutorialnya...

9ntuk :odeigniternya, ane anggap pemiarsa semua udah pada paham, yak...; 2ntinya dalam membuat %ebsite kita sendirikan menjadi ! sub bagian pokok, yaitu 3odel (pengambilan data dari database), <ie% (tampilan %ebsite) dan :ontroller (proses&proses yang dilakukan).

Yang pertama sekali dalam membuat %ebsite dengan :odeigniter adalah mengatur kon/igurasi sebagai %ebsite, yang pengaturannya berikut dilakukan di /ile ) =application/config/config.php=. Settingannya yang .6L2'> 91636 (minimal) adalah

17.

$config['base_url']

'http://localhost/web_sd/';

227. $config['encryption_key'] = 'super90';

.enjelasan +aris (

-.

?con/ig@AbaseBurlAC D Ahttp)**localhost*%ebBsd*AE) digunakan untuk mengatur

alamat root %ebsite yang kita buat. (alam kasus ini, /older %eb :odeigniter saya saya beri nama =web_sd= dan saya letakkan di /older FFF (Famp Server). $adi kalau di tempat pemiarsa /oldernya diberi nama beda dengan ini, maka kon/igurasinya menjadi )

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

+aris (22-. ?con/ig@AencryptionBkeyAC D Asuper70AE). 2ni gini pemiarsa. (alam %ebsite ini nantinya kan menggunakan yang namanya session. 'ah, di :odeigniter (selanjutnya kita sebut :2, males ngetiknya), jika mengakti/kan session, maka settingan ini harus disetting. <aluenya bebas, terserah 6nda, pemiarsa.

2tu untuk setting kon/igurasi dasar %ebsite :2 kita kali ini. Selanjutnya kita melangkah ke setting database&nya. Setting database ini dapat kita temui di /ile =application/config/database.php=. 8h iya, jangan lupa buat database dulu dengan nama =web_sd=. Selanjutnya settingannya yang .6L2'> 91636, seperti ini pemiarsa )

51. $db['default']['hostname'] = 'localhost'; 52. $db['default']['username'] 53. $db['default']['password'] = = 'root'; '';

//sesuaikan dengan server MySQL Anda // username mysql mysql Anda Anda

//password

54. $db['default']['database'] = 'web_sd'; // kita sepakati, buat database dengan nama "web_sd"

9ntuk

skrip

import

/ile

SGLnya

adalah

sebagai

berikut

CREATE `id` `u` `p` `nama` `email` `level`

TABLE int(1) NOT varchar(15) varchar(15) varchar(30) varchar(30) enum('1','2','3') PRIMARY

`admin` NULL NOT NOT NOT NOT NOT KEY CHARSET=latin1 AUTO_INCREMENT=2

( auto_increment, NULL, NULL, NULL, NULL, NULL, (`id`) ;

ENGINE=InnoDB

DEFAULT

CREATE `id` `tgl` `ket` `tempat`

TABLE int(3) NOT date varchar(255) varchar(255) PRIMARY

`agenda` NULL NOT NOT NOT KEY CHARSET=latin1 AUTO_INCREMENT=2

( auto_increment, NULL, NULL, NULL, (`id`) ;

ENGINE=InnoDB

DEFAULT

CREATE `id` `judul` `gambar` `isi` `hits` `tglPost` `kategori` `oleh`

TABLE int(4) NOT varchar(255) varchar(100) mediumtext int(4) datetime varchar(75) varchar(30)

`berita` NULL NOT NOT NOT NOT NOT NOT NOT

( auto_increment, NULL, NULL, NULL, NULL, NULL, NULL, NULL,

`publish` PRIMARY ) ENGINE=InnoDB DEFAULT

int(1) KEY CHARSET=latin1

NOT

NULL, (`id`)

AUTO_INCREMENT=18

CREATE `id`

TABLE int(4) `id_berita` `nama` `email` `komentar` `tgl` PRIMARY NOT int(4) varchar(100) varchar(100) varchar(250) datetime

`berita_komen` NULL NOT NOT NOT NOT NOT KEY CHARSET=latin1 AUTO_INCREMENT=2

( auto_increment, NULL, NULL, NULL, NULL, NULL, (`id`) ;

ENGINE=InnoDB

DEFAULT

CREATE `id` `nama` `nip` `mapel` `jk` `alamat` `foto`

TABLE int(3) NOT varchar(100) varchar(30) varchar(50) enum('L','P') varchar(200) varchar(150) PRIMARY

`data_guru` NULL NOT NOT NOT NOT NOT NOT KEY CHARSET=latin1 AUTO_INCREMENT=2

( auto_increment, NULL, NULL, NULL, NULL, NULL, NULL, (`id`) ;

ENGINE=InnoDB

DEFAULT

CREATE `id` `nama` `nis` `kelas` `jk` `alamat` `foto`

TABLE int(3) NOT varchar(100) varchar(30)

`data_siswa` NULL NOT NOT NOT NOT NOT NOT KEY CHARSET=latin1 AUTO_INCREMENT=2

( auto_increment, NULL, NULL, NULL, NULL, NULL, NULL, (`id`) ;

enum('1','2','3','4','5','6','L') enum('L','P') varchar(200) varchar(150) PRIMARY

ENGINE=InnoDB

DEFAULT

CREATE `id` `id_album` `file` `ket`

TABLE int(4) NOT int(3) varchar(255) varchar(255) PRIMARY

`galeri` NULL NOT NOT NOT KEY CHARSET=latin1 AUTO_INCREMENT=1

( auto_increment, NULL, NULL, NULL, (`id`) ;

ENGINE=InnoDB

DEFAULT

CREATE `id` `nama`

TABLE int(3) NOT varchar(100) PRIMARY

`galeri_album` NULL NOT KEY CHARSET=latin1 AUTO_INCREMENT=4

( auto_increment, NULL, (`id`) ;

ENGINE=InnoDB

DEFAULT

CREATE `isi` `id`

TABLE longtext int(1) PRIMARY NOT

`haldep` NOT NULL KEY CHARSET=latin1 AUTO_INCREMENT=2

( NULL, auto_increment, (`id`) ;

ENGINE=InnoDB

DEFAULT

CREATE `id` `nama` `alamat`

TABLE int(3) NOT varchar(150) varchar(150) PRIMARY KEY CHARSET=latin1

`link` NULL NOT NOT

( auto_increment, NULL, NULL, (`id`)

ENGINE=InnoDB

DEFAULT

AUTO_INCREMENT=2

CREATE `id` `nama` `email` `pesan` `tgl`

TABLE int(4) NOT varchar(100) varchar(100) varchar(200) datetime PRIMARY

`pesan` NULL NOT NOT NOT NOT KEY CHARSET=latin1 AUTO_INCREMENT=5

( auto_increment, NULL, NULL, NULL, NULL, (`id`) ;

ENGINE=InnoDB

DEFAULT

CREATE `id` `tanya` `op_1` `op_2` `op_3` `op_4` `j_1` `j_2` `j_3` `j_4`

TABLE int(3) NOT varchar(255) varchar(200) varchar(200) varchar(200) varchar(200) int(3) int(3) int(3) int(3) PRIMARY KEY CHARSET=latin1

`poll` NULL NOT NOT NOT NOT NOT NOT NOT NOT NOT

( auto_increment, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, (`id`) AUTO_INCREMENT=2 ;

ENGINE=MyISAM

DEFAULT

CREATE `id` `judul` `isi`

TABLE int(2) NOT varchar(200) longtext PRIMARY

`profil` NULL NOT NOT KEY

( auto_increment, NULL, NULL, (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

$adi kita membuat 7 tabel, yaitu sebagai berikut ) . admin ) untuk menampung data username dan pass%od login admin 2. agenda ) untuk menyimpan data agenda kegiatan sekolah !. berita ) untuk menampung data berita %ebsite H. berita_komen ) untuk menampung data komentar berita %ebsite I. data_guru ) untuk menampung data guru J. data_siswa ) untuk menampung data sis%a -. galeri ) untuk menyimpan data /oto&/oto di galeri /oto 0. galeri_album ) untuk menyimpan data albumd alam galeri /oto

7. haldep ) untuk menampung data page halaman beranda %ebsite 0. link ) untuk menyimpan data link atau tautan dari %ebsite . pesan ) untuk menampun data kontak masuk melalui %eb 2. poll ) untuk menampung data polling !. profil ) untuk menampung data pro/il sekolah 8", pemiarsa nampaknya ane untuk bagian sudah kita lakukan adalah ) . 3engatur kon/igurasi %ebsite (/ile ) =application/config/config.php=) 2. 3engatur kon/igurasi database %ebsite (/ile ) =application/config/database.php=) !. 3embuat database, dengan 7 tabel. $ika kesulitan meliat skrip SGL di atas, bisa dido%nload, DISI I. .ilih yang =web_sd.s!l= cukup sampe di sini, yak. Langkah yang

4. (Bag 2) Pe b!atan Te plate Website " Website Profil Sekolah dengan Codeigniter dan Twitter Bootstrap
I. 1emplate Febsite...; Ya, ini adalah sebuah bahasa 2nggris. 3enurut kamus besar bahasa google H juta milliar (teringat kamus bahasa inggris S3.&ku dulu H milliar, loh gan) itu arti dari kata K1emplateL sendiri adalah K:ontohL (diakses pada tanggal 20*0H*20 !, pukul 07.H ). 'ah loh, gak begitu nyambung, yak. 6ne cari lagi, di google, arti kata template, buat menemukan arti sebenarnya yang mudah dimengerti dari kata template ini. 'ah, akhirnya dapet yang begitu nyambung, arti dari template %ebsite adalah sebuah desain tampilan halaman dengan berisikan dokumen /ile model&model tambahan yang dikodekan dalam bahasa program dan siap pakai.

2tu kiranya pengertian template %ebsite. "lo ane ambil kesimpulan dari setiap ane membikin template adalah ) membuat desain tampilan sebuah halaman %eb utama*utuh, yang dalam penggunaannya nanti ada salah satu bagian yang akan diisi oleh konten&konten dari %ebsite atau intinya bagian tertentu itu berubah&ubah... (kira&kira begitu, komandan). Lihat gambar diba%ah ini ) 1api dalam konteks ini, sesuai judulnya, kita akan meman/aatkan sebuah /rame%ork

:SS 1%itter +ootstrap, yang pengertiannya sudah dijelaskan dalam bagian pertama bahasan ini. 2nsya 6lloh, 1%itter bootstrap ini sudah mengadopsi teknologi yang bersi/at Kresponsive designL, M13LI, dan :SS!. J.

7.

0. 7. +anyak cara mecari template %ebsite ini, salah satunya dengan mendo%nload template gratis yang banyak bertebaran di internet. 9ntuk akhir&akhir ini template yang paling populer adalah template yang bersi/at Kresponsive designL atau template tersebut bisa menyesuaikan layar device user*pengunjungnya. Secara, hari gini, banyak orang yg mengakses le%at Smartphone, 1ablet, "apsul (eh.. ora, lho), +lackberry, dll (yang satupun ane kagak punya, lho gan.. M. ane, tipe 'okia 0! dan 3otorolla FN& 7!, && sebuah pengakuan jujur, lho ini, hahaha). 1rus yang ngetren lagi yang sudah M13LI dan :SS !, yang merupakan teknologi pemrograman %eb statis saat ini (20 !). Mehe.

8", langsung saja. .ada pembuatan %ebsite ini kita akan membuat template dengan

2 kolom utama (kolom 2) sidebar, klom !) konten), header (nomor seperti gambar di ba%ah ini ) 0.

), /ooter (H),

11.
2. !. "ita akan membuat templatenya dengan menggunakan t%itter bootstrapnya. Langsung saja, karena saya tidak menjelaskannya satu&persatu, panjang bener, gan.. sumpah, maka akan langsung saya sertakan dalam /ile do%nload di ba%ah ini. H. Simpan /ile tersebut dengan nama inde,.html. 'ah jika dibuka, makan belum menghasilkan template jadi, melainkan hanya menampilkan tampilan acak&acakan dan gak beraturan. 2tu karena /ile :SS dan $avascript dari 1%itter bootstrapnya belum kita sertakan. +uatlah sebuah /older dengan nama KasetL yang ber/ungsi untuk menyimpan /ile :SS dan $avascript dari 1%itter +ootstrapnya. I. J. Selanjutnya buka /older ekstrakOan dari hasil do%nload 1%itter bootstrapnya. +uka /older ) -.

0. Kt%itter&bootstraps*docs*assets*L, akan didapatkan H /older seperti ini ) 7.

20.
2 . 22. 9ntuk /older KimgL itu banyak terdapat /ile yang sebenarnya tidak perlu, nah kita hapus saja /ile tersebut. +uka /older KimgL tersebut, dan hapus beberapa /ile, dan sisakan hanya /ile&/ile berikut ini (/ile&/ile image intinya t%itter bootstrap))

23.
2H. 2I. "emudian balik ke /older KassetsL , dan copykan semua /oldernya (css, ico, js, dan img) ke /older KasetL di /older template yang kita buat tadi. 2lustrasinya seperti ini ) 2J.

27.
20. 27. 'ah, sekarang buka /ile Kinde,.htmlL tersebut, maka akan ditampilkan template kita sudah jadi, dan akan seperti ini ) !0.

31.
!2. !!. 3ungkin agak berbeda dengan punya saya. 6da gambar yang tak tampil, dan lain sebagainya. 9ntuk gambar, itu nanti bisa diperbaiki sendiri, yak. 1rus mungkin berbeda dengan punya saya yang ada %arna biru&birunya, itu karena punya saya sudah saya ubah sedemikian rupa di /ile Kaset*css*bootstrap.cssL&nya. 8", sekian

dulu untuk bahasan untuk .embuatan 1emplate dengan /rame%ork :SS , 1%itter +ootstrap kali ini, akan kita lanjutkan di bahasan selanjutnya, yaitu mengisikan template ke :odeigniternya. Mehehe.. 9ntuk /ile template jadinya, bisa dido%nload di link berikut ini )