Belajar Codeigniter Bagian 1: Apa Itu Codeigniter Dan Bagaimana Cara Menggunakannya?

Apa Itu Codeigniter Dan Bagaimana Cara Menggunakannya?

Selamat datang di bahasan pertama mengenai Codeigniter. Kali ini kita akan mempelajari apa itu codeigniter dan bagaimana cara menggunakannya. Mungkin sebelumnya anda sudah pernah membangun suatu aplikasi website dengan php native? Melelahkan bukan? Dimana kita harus membangun sistemnya dari awal, menulis sintaks yang sama secara berulang ulang.

Seiring berjalannya waktu, banyak framework mulai bermunculan untuk memudahkan para eeb developer dalam membangun aplikasi webnya salah satunya yaitu Codeigniter. Yap, codeigniter merupakan salah satu framework php yang paling banyak digunakan oleh para developer untuk membangun website mereka. Pengembangan dengan framework codeigniter juga sangatlah baik. Berikut kita akan pelajari apa itu codeigniter serta bagaimana cara menggunakannya.

Apa itu codeigniter?

Framework adalah sekumpulan instruksi yang dikumpulkan dalam suatu class dan function  - function dengan fungsinya masing - masing untuk memudahkan web developer dalam pemanggilannya tanpa harus menuliskan sintaks yang secara berulang ulang. Hal ini guna menghemat waktu dan mencegah penulisan sintaks yang sama secara berulang ulang agar terciptanya suatu source code yang bersih dan terstruktur.

Codeigniter merupakan sebuah framework php yang bersifat open source dan menggunakan konsep MVC (Model - View - Controller). Codeigniter dibuat dengan tujuan yang sama seperti framework lainnya yaitu untuk membantu memudahkan pekerjaan developer atau programmer dalam membangun sebuah aplikasj web tanpa harus membuatnya dari awal.

Lalu, apa itu konsep MVC?

MVC merupakan suatu teknik atau konsep yang memisahkan komponen utama menjadi tiga komponen yaitu berupa Model, View, dan Controller.

• Model : merupakan komponen yang menangani hubungan antara sistem yang kita buat dengan pengolahan atau manipulasi database. Seperti misalnya mengambil data dari database, menginput data, dan pengolahan database lainnya. Semua instruksi yang berhubungan dengan pengolahan database diletakkan didalam model.
• View: merupakan bagian yang menangani user interface atau halaman yang alan ditampilkan pada user. Tampilan dari user interface dikumpulkan pada view untuk memisahkannya dengan model maupun controller sehingga memudahkan web designer dalam meletakkan pengembangan tampilan website.
• Controller: merupakan kumpulan instruksi aksi yang menghubungkan antara model dengan view, jadi user tidak akan berhubungan dengan model secara langsung, intinya dari view kemudianS controller yang mengolah instruksi.

Dari penjelasan tentang konsep MVC tersebut, dapat kita simpulkan bahwa controller memiliki fungsi sebagai prnghubung antar model dengan view. Misalnya pada suatu aplikasi website yang menampilkan data dengan konsep MVC, maka controller akan menangani suatu instruksi pada model yang mengambil data dari database, kemudian controller meneruskannya ke bagian view untuk ditampilkan ke user.

Apa saja kelebihan Codeigniter?

• Sintaks yang bersih dan terstruktur 
• Mempersingkat waktu pengerjaan / pengembangan aplikasi
• Mudah dalam penggunaan
• Tersedianya fasilitas helper dan library yang dapat membantu developer dalam membuat pagination, session, manipulasi url dan lainnya
• Keamanan sistem sudah cukup baik, karena user atau pengakses tidak berhubungan langsung dengan database
• Banyaknya komunitas developer yang menggunakan codeigniter yang tentunya akan sangat membantu apabila kita menghadapi suatu kendala tertentu dalam proses pengembangan.

Bagaimana cara menggunakan codeigniter?

Menggunakan codeigniter sangatlah mudah, anda dapat mendownload codeigniter pada situs resminya di www.codeigniter.com. Kemudian anda tinggal mengekstrak isi folder codeigniter tersebut di localhost (folder htdocs jika anda menggunakan Xampp sebagai web servernya). Misalnya disini saya ekstrak file codeigniter saya ke dalam folder bernama blog seperti berikut ini:

Kemudian kita tinggal menjalankannya pada browser dengan alamat localhost/blog (atau sesuai nama folder anda). Jika berhasil maka tampilannya akan seperti berikut ini:

Sekian dulu bahasan kita kali ini mengenai apa itu codeigniter dan bagaimana cara menggunakannya. Pada bagian selanjutnya kita akan membahas dasar - dasar penggunaan codeigniter pada aplikasi web yang kita buat, seperti pembuatan model, view, controller maupun bagaimana memanipulasi helper, library serta uri segment.

Untuk lebih jelasnya dari tutorial ini, anda bisa menonton videonya pada link berikut ini : tutorial install codeigniter

Belajar Bootstrap Bagian 4: Membuat Form Dengan Bootstrap

Membuat Form Dengan Bootstrap

Form merupakan salah satu komponen terpenting dalam sebuah website, entah itu untuk urusan pendaftaran, login, maupun form isian lain yang memungkinkan. Untuk itu, pada bagian ini kita akan mempelajari bagaimana membuat form dengan bantuan bootstrap.

Apabila sebelumnya dalam urusan pembuatan form kita sering direpotkan dengan bagaimana caranya agar form terlihat menarik, maka dengan bootstrap membuat form merupakan suatu hal yang mudah. Kita tinggal memanggil class dari form pada tag <form>. Bootstrap sendiri memiliki beberapa jenis class form yang bisa digunakan antara lain.

• Form Inline: form yang segaris atau sejajar, sangat cocok digunakan untuk form pencarian ataupun untuk aktivitas log in seperti yang sering kita lihat di facebook misalnya.
• Form Vertical: bisa dibilang ini adalah bentuk form default-nya, karena pada pembuatan form dengan jenis ini kita tidak harus melakukan pemanggilan class-nya secara utuh (form-vertical). Class-nya bisa dipanggil hanya dengan form saja.
• Form Horizontal: tidak berbeda jauh dengan form-vertical, hanya saja form ini akan terlihat sedikit lebih lebar.

Itulah sedikit penjelasan tentang beberapa jenis form yang ada di bootstrap. Sekarang kita akan memulai untuk belajar bagaimana cara membuatnya.

Membuat Form Inline

<!DOCTYPE html>
<html>
	<head>
		<title>Belajar Bootstrap</title>
		<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
	</head>
	<body>
		<div class="container">
			<h3>Belajar Membuat Form Dengan Bootstrap</h3>
			<hr>
			<!-- Form Inline -->
			<h4>Form Inline (sejajar)</h4>
			<form class="form-inline">
				<div class="form-group">
					<label>Nama</label>
					<input class="form-control" type="text" name="#">
				</div>
				<div class="form-group">
					<label>Alamat</label>
					<textarea class="form-control"></textarea>
				</div>
			</form>
		</div>
	</body>
</html>

Jika code diatas sudah diketik dengan benar, maka hasil yang akan tampil akan seperti berikut ini:

Saya jelaskan sedikit..

<form class="form-inline">
	<div class="form-group">
		<label>Nama</label>
		<input class="form-control" type="text" name="#">
	</div>

Pada script diatas, kita memanggil form berbentuk inline, maka akan tampil form isian yang sejajar/segaris. Kemudian class form-group ini merupakan suatu class yang digunakan untuk mengelompokkan per kolom isian agar terlihat rapi. Selain itu ada class form-control yang digunakan untuk membuat kolom isian menggunakan tema bootstrap.

Membuat Form Vertikal

Pada file yang sama, coba tambahkan code berikut ini:

<!-- Form Vertikal -->
<h4>Form Vertikal</h4>
<form class="form-vertical">
	<div class="form-group">
		<label>Nama</label>
		<input class="form-control" type="text" name="#">
	</div>
	<div class="form-group">
		<label>Alamat</label>
		<textarea class="form-control"></textarea>
	</div>
</form>

Jika code diatas sudah diketik dengan benar, maka hasil yang akan tampil akan seperti berikut ini:

Saya jelaskan sedikit..

<form class="form-vertical">

Pada script diatas, kita memanggil form berbentuk inline, maka akan tampil form isian yang berbentuk vertikal seperti pada gambar diatas.

Membuat Form Horizontal

Masih dengan file yang sama, coba tambahkan code berikut ini:

<!-- Form Horizontal -->
<h4>Form Horizontal</h4>
<form class="form-horizontal">
	<div class="form-group">
		<label>Nama</label>
		<input class="form-control" type="text" name="#">
	</div>
	<div class="form-group">
		<label>Alamat</label>
		<textarea class="form-control"></textarea>
	</div>
</form>

Jika code diatas sudah diketik dengan benar, maka hasil yang akan tampil akan seperti berikut ini:

Saya jelaskan lagi..

<form class="form-horizontal">

Pada script diatas, kita memanggil form berbentuk horizontal, maka akan tampil form isian yang berbentuk horizontal seperti pada gambar diatas. Memang antara form vertikal dengan yang horiztontal tidak terlihat perbedaan yang besar, perbedaannya hanya diukuran form-nya saja.

Sekian dulu untuk kali ini, ini hanya dasarnya saja untuk pembuatan form tapi semoga bermanfaat. Lain kesempatan kita bahas lagi lebih dalam mengenai form bootstrap, misalnya untuk form pengisian tanggal menggunakan datepicker dan lainnya.

Belajar Bootstrap Bagian 3: Membuat Tombol Dengan Bootstrap

Membuat Tombol Dengan Bootstrap

Pada bagian sebelumnya kita sudah mempelajari bagaimana implementasi bootstrap ke dalam tampilan web yang akan kita buat. Namun pada bagian sebelumnya kita belum melihat hasil dari implementasi tersebut, nah maka dari itu kelanjutan dari bahasan sebelumnya akan dibahas pada bagian 3 ini. 

Pada bagian ini kita akan mempelajari salah satu contoh sederhana tapi tetap penting untuk dipelajari dari bootstrap yaitu membuat tombol. Tombol merupakan salah satu elemen penting dalam suatu website yang sangat berguna untuk membantu mengakomodir keinginan user. Tentu kita akan bosan melihat tampilan tombol bawaan html yang terlihat kaku. Maka dari itu kita akan belajar bagaimana membuat tombol terlihat menarik dengan bootstrap. Saya berasumsi bahwa anda sudah mendownload bootstrap pada tahap ini.

Pada bootstrap, tombol dapat dikelompokkan dalam ukuran dan warna.

Membuat tombol dengan berbagai ukuran

• btn-lg : ukuran tombol ini yaitu large (ukuran tombol yang paling besar di bootstrap)
• btn-md : ukuran sedang
• btn-sm : ukuran kecil
• btn-xs : ukurannya ekstra kecil (yang paling kecil di bootstrap)

Kita langsung saja ke contoh code-nya:

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Bootstrap</title>
  <link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
 </head>
 <body>
  <h3>Belajar Membuat Tombol Dengan Bootstrap</h3>
  <hr>
  <h4>Tombol Berdasarkan Ukuran</h4>
  <button class="btn btn-lg">Tombol btn-lg</button>
  <button class="btn btn-md">Tombol btn-md</button>
  <button class="btn btn-sm">Tombol btn-sm</button>
  <button class="btn btn-xs">Tombol btn-xs</button>
  <br><br>
 </body>
</html>

Nah, kalau sudah selesai maka tampilan tombolnya akan terlihat seperti gambar berikut:

Membuat tombol berwarna

• btn-default : tombol ini biasanya akan terlihat berwarna putih/warna dasar website yang kita buat.
• btn-primary : tombol primary akan berwarna bitu gelap.
• btn-success : tombol success akan berwarna hijau.
• btn-info : tombol info akan menjadikan tombol berwarna biru muda.
• btn-warning : tombol warning akan berwarna kuning.
• btn-danger : tombol akan berwarna merah.

Kita langsung saja ke contohnya:

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Bootstrap</title>
  <link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
 </head>
 <body>
  <h4>Tombol Berdasarkan Warna</h4>
  <button class="btn">Tombol btn</button>
  <button class="btn btn-default">Tombol btn-default</button>
  <button class="btn btn-primary">Tombol btn-primary</button>
  <button class="btn btn-info">Tombol btn-info</button>
  <button class="btn btn-success">Tombol btn-success</button>
  <button class="btn btn-warning">Tombol btn-warning</button>
  <button class="btn btn-danger">Tombol btn-danger</button>
 </body>
</html>

Kalau sudah, maka hasilnya kurang lebih akan seperti ini:

Kita perjelas sedikit, jadi untuk mendapatkan hasil seperti diatas kita sudah menyisipkan beberapa class dari bootstrap untuk membuat tombol. Misalnya kalau kita ingin membuat tombol berwarna kuning maka class yang kita panggil adalah btn-warning seperti berikut:

Atau misalkan kita ingin membuat suatu tombol dengan ukuran dan warna sesuai keinginan kita, misalnya saya contohkan disini adalah tombol berwarna hijau dengan ukuran ekstra kecil, maka class yang kita panggil akan menjadi seperti berikut:

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Bootstrap</title>
  <link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
 </head>
 <body>
  <h4>Membuat tombol dengan ukuran dan warna tertentu</h4>
  <button class="btn btn-sm btn-success">Tombol xs success</button>
 </body>
</html>

Dan hasilnya kurang lebih akan seperti ini:

Catatan: kalau tombol masih dalam keadaan tampilan tombol bawaan html, coba periksa pemanggilan class-nya sudah benar atau tidak. Atau coba periksa lagi lokasi file dari bootstrap anda apakah sudah benar dengan pemanggilan lokasi di source-nya seperti pada Bagian 2: Belajar Menggunakan Bootstrap.

Belajar Bootstrap Bagian 2: Belajar Bagaimana Cara Menggunakan Bootstrap

Bagaimana Cara Menggunakan Bootstrap?

Apabila pada bagian sebelumnya kita sudah mengetahui Apa itu Bootstrap dan apa fungsinya, maka pada bagian kali ini kita akan mempelajari bagaimana cara menggunakan atau mengimplementasikan Bootstrap didalam tampilan web yang akan kita buat. Sebelum memulainya, pastikan anda sudah mendownload file bootstrap terlebih dahulu di getbootstrap.com. Kemudian ekstrak file bootstrap yang sudah anda download tadi kedalam folder baru, beri saja nama foldernya belajar bootstrap. Kurang lebih susunan filenya akan seperti ini:

Ada beberapa cara yang dapat dilakukan untuk mengimplementasikan bootstrap didalam tampilan web yang kita buat, yaitu dengan cara menginstall bootstrap secara offline (dengan mendownload file bootstrap seperti yang sudah dilakukan tadi) atau dengan menginstallnya secara online. Sama aja sih sebenarnya, hanya saja kalau kita mengimplementasikan bootstrap lewat cdn (online) tentu saja kita harus terkoneksi dengan internet untuk dapat melihat hasilnya. Jadi kali ini kita lakukan secara offline saja.

Nah kalau sudah, sekarang kita mulai kodingnya. Buka editor anda semisal Notepad++, Sublime atau yang lainnya. Nah disini saya menggunakan Sublime, lebih nyaman aja. Kemudian kita buat file baru beri saja nama index.html atau sesuai keinginan anda, save filenya di folder belajar bootstrap tadi. diantara tag <head> ... </head>  tulis kode seperti berikut ini:

index.html

<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">

Perlu diperhatikan pemanggilan lokasi file harus sesuai dengan lokasi dimana file css dari Bootstrap anda disimpan.

Sekian dulu untuk kali ini, kita lanjut di bagian berikutnya.

Belajar Bootstrap Bagian 1: Apa itu Bootstrap dan Fungsinya?

Apa itu Bootstrap? Apa Fungsinya?

Bootstrap adalah sebuah framework CSS yang dibuat oleh twitter untuk memudahkan pekerjaan para front-end web developer dalam membangun dan mengembangkan sebuah tampilan situs/aplikasi web yang dinamis. Dengan adanya Bootstrap para developer tidak perlu lagi merancang CSS untuk tampilan dari awal, sehingga membuat waktu pengerjaan web menjadi jauh lebih singkat.

Bootstrap dilengkapi dengan beberapa komponen JavaScript dalam bentuk jQuery plugin. Mereka menyediakan elemen antarmuka pengguna tambahan seperti kotak dialog, tooltips. Bootstrap juga memperluas fungsi beberapa elemen antarmuka yang ada, termasuk fungsi auto-complete untuk bidang masukan.

Bootstrap sangat kompatibel dengan versi terbaru dari browser terkenal seperti Google Chrome , Firefox , Internet Explorer , Opera , dan Safari browser.
Sejak versi 2.0 Bootstrap juga mendukung desain web responsif, ini berarti tata letak halaman web dapat menyesuaikan tampilan secara dinamis dengan mempertimbangkan karakteristik dari perangkat yang digunakan (desktop, tablet, dan ponsel).
Dimulai dari versi 3.0, Bootstrap (sampai sekarang) mengadopsi desain mobile-first, menekankan desain yang responsif secara default. Kabar terbaru mengatakan bahwa Bootstrap versi 4.0 alpha akan segera release dengan menambahkan dukungan Sass dan flexbox.

Kelebihan Bootstrap:

1. Estimasi waktu pengerjaan tampilan menjadi lebih cepat. Karena elemen - elemen yang umumnya ada dalam sebuah tampilan web sudah disediakan dalam bentuk class, jadi kita hanya tinggal memanggil class - class tersebut.
2. Tampilan web terlihat lebih rapi karena pada dasarnya tampilan yang dibentuk ole Bootstrap sudah terstruktur.
3. Tampilan lebih ringan ketika di-load.
4. Dokumentasi yang lengkap. Bootstrap mempunyai kelebihan dalam hal dokumentasi, sehingga kita tidak kesulitan untuk menemukan referensi dalam mempelajarinya.

Kekurangan Bootstrap:

1. Tampilan website yang kita buat, akan memiliki kemiripan dengan tampilan milik orang lain yang juga menggunakan Bootstrap sebagai dasar dari tampilannya.
2. Salah satu kemampuan bootstrap adalah minim gambar karena memanfaatkan CSS3, namun disisi itu pula kekurangan dari bootstrap, CSS3 yang dikembangkan twitter dan yang lainnya belum mampu menghasilkan tampilan yang seragam di berbagai peramban halaman web.

Bootstrap adalah open source yang tersedia di official site mereka di getbootstrap.com maupun GitHub.