Cara Memasukan Template Bootstrap ke Codeigniter

Assalamu’alaikumWr-wb.

Yaa, kembali lagi di Bagas Tone, blog tentang program dsbnya. Pada tutorial sebelumnya telah membahas tentang Penting !! Cara Setting base_url dan Menghilangkan index.php, dimana dalam menjalankan codeigniter perlu setting tersebut.

Pembasan kali ini apa si? Yaa, jadi pembahasan kali ini tentang templating Codeigniter. Templateing itu jadi sebuah langkah dimana kita pengen membuat tampilan website Codeigniter kita sesuai template website yang telah kita rancang atau download. Tidak hanya templating, kali ini berisi tentang :

1.      Manage Folder

2.      Templating

3.      Layouting

4.      View to Controller

5.      Testing

Jadi pada finallnya kita akan menampilkan template yang sudah di bagi sesuai layout yaitu :

- header

- Isi atau Content

- Footer

Yang harus kalian siapin adalah :

1.      Download template yang akan dipakai di : download 

2.      Aktifin apache dan mysql di XAMPP control panel, jangan lupa

3.      Cari dan buka hasil downloadnya

4.      Buka Sublime Text 3nya dan open folder ci_latihan, seperti tutorial sebelumnya.

Langkah 1 : Manage Folder

1.      Setelah dibuka hasil download tempaltenya, copy folder css – vendor.

2.      Buka C:\xampp\htdocs\ci_latihan à buat folder baru dengan nama assets. Paste di dalam folder assets.  Hasil akhirnya kegini :

Langkah 2 : Templating

1.      Buka folder downloadan templatenya, seleksi index.html dan about.html à drag ke Sublime Text 3nya

2.      Buat file baru dengan nama beranda.php dan about.php dan sebuah folder baru yang berisi header.php dan footer.php di application/view/

3.      Copy seluruh isi index.html ke beranda.php dan isi about.html ke about.php. Jangan lupa di save (ctrl+s).

4.      Kemudian tambahkan cooding ini “ <?php echo base_url(); ?>assets/ “ di link yang mengarah ke assets.

a.       Cooding di atas (header), cari “ <link href= “

b.      Di tengah cari  img , dan lakukan di “ src= “

c.       Di bawah (footer atau script), cari script dan lakukan di “ src= “

Yang perlu diketahui, perbedaan di kotak merah dan biru yaitu merah tidak perlu tapi harus konek ke internet ketika dijalankan (supaya font sesuai template) dan biru adalah wajib di lakukan karna berkaitan dengan tampilan.

Lakukan hal yang sama di about.php

Langkah ke 4 : Layouting

1.      Setelah itu focus ke beranda.php. Lakukan Cut cooding dari atas sampai tag “ </nav> “. Paste di header.php.

2.      Kemudian Cut kembali cooding dari tag “ <footer> “ sampai bawah. Paste di footer.php. Jangan lupa di save (ctrl+s).

3.      Nah pastiin yang tersisa di beranda.php adalah dari tag “ <section> “ sampai “ </section> “. Pastiin juga di about hanya section yang tersisa.

 

Langkah ke 4 : View to Controller

1.      Buat controller baru dengan nama Beranda.php dan About.php

2.      Load View “header, beranda dan footer” di Controller Beranda.php. Load View juga “header, about dan footer” di Controller About.php

Langkah ke 5 : Testing

1.      Buka browser kesayangan kalian

2.      Akses url : “ localhost/ci_latihan/Beranda “

3.      Jika berhasil maka akan tampil tampilan beranda.php. Kemudian klik menu About , jika berhasil maka akan mengakses Controller About.php dan menampilkan View dari about.php

Yahaha.. akhirnya selesai jugaa 😉. Nah setalah mengikuti langkah 1 sampai 5 kalain sudah bisa manage folder, templateing, layouting dan koneksi view ke controller. Alhamdulillah 😊

Yoosh, semoga tutorialnya bermanfaat bagi kalian yang lagi semangat skripsi atau ngooding Codeignier :D :D.

Jika ada yang bingung step di atas tanyakan di kolom komentar dibawah. Yang mau request juga bisa seputar codeigniter 😊 😊

Terimakasih telah mengikuti sejauh ini. Akhir kata Wassalamu’alaikum Wr-wb. 

Download Template

Penting !! Cara Setting base_url dan Menghilangkan index.php

Assalamu’alaikum Wr-wb.

Hello gan. Welcome back to my blog.

Gimana kabar gan? Semoga sehat selalu, aamiin. Nah kali ini kita akan melanjutkan tutorial sebelumnya tentang Apa itu codeignier dan bagaimana cara installnya ? dengan pembahasan selanjutnya tentang “Setting base_url dan Menghilangkan index.php – Setting Awal Codeigniter”. Jika yang sudah paham skip penjelasannya ke bawah.

Nahlo.. Apa dan kenapa dengan base_url dan index.php? Kita bahas satu persatu.

Base_url adalah setting untuk pengalamatan sebuah website. Dengan kita setting base_url server akan mengenali alamat kita. dan kenapa perlu disetting? Ini alasannya :

1.    Agar server mengenali projek atau website yang kita buat

2.    Agar tidak terjadi error ketika diupload di server internet, bisa dilihat dipenjelasan dibawah :

Gambar 1. Base_url dengan server localhost XAMPP

Pada gambar 1, nampak template (desain web) yang kita gunakan baik-baik saja. It’s good. Karna kebiasaan dalam tutorial website lain menggunakan setting base_url dengan kombinasi localhost + folder projek website, misal : $config['base_url'] = 'http://localhost/ci_latihan';

It’s okay buat yang menggunakannya hanya di server local seperti “localhost XAMPP”. Tapi terkadang ketika kita mau upload ke server internet misal “000webhost” ada yang nampak error terutama ditampilan yang berubah seperti gambar 2.

Gambar 2. Base_url dengan server internet “000webhost”

Kasus ini bisa saja terjadi dan bisa saja tidak. Nah untuk antisipasi error itu maka perlu kita setting.

Nah selanjutnya tentang index.php. index.php adalah alamat default yang harus diakses ketika kita mengakses sebuah controller diluar controller default (welcome). Misalnya, ditutorial sebelumnya tentang Apa itu codeignier dan bagaimana cara installnya ? yang ketika kita mengakses http://localhost/ci_latihan/ yang nampak adalah controller welcome. (Ssst bingung tentang “controller” ? :D. Tenang, nanti kita akan bahas di tutorial berikutnya).

Kenapa harus dihilangkan ? yaaps, pertanyaan bagus. Jadi alasannya kegini :

1.      Kita bisa liat gambar 1 dan 2 (focus kotak merah). Disitu diasumsi mengakses controller “Beranda” yang isinya tampilan seperti gambar itu. Nah jelas banget, kita harus nambahin index.php untuk akses controller Beranda missal “http://localhost/ci_latihan/index.php/Beranda”: . Ribeeet yaah, yaa nda?

2.      Nah selain alas an ribet. url atau alamat website yang kita buat jadi nda terliat bagus atau cantik.

3.      Alasan  berikutnya tambah sendiri :D :D

Nah Panjang x lebar penjelasannya :D:D. ndapapa yang penting dalam pemrograman adalah kalian bener-bener paham dan mudeng dengan apa yang kalian kerjakan.

Selanjutnya, action. Yang perlu kalian siapin adalah :

1.      Jelas karna kita pakai XAMPP, maka harus diaktifkan apache dan mysql. lihat di tutorial sebelumnya

2.      Pastiin folder atau projek sudah ada di htdoc kalian . lihat di tutorial sebelumnya

3.      Siapin text editor, disini menggunakan “Sublime Text 3” untuk mengedit cooding website kita. belum punya ? download 

Seeting awal codeigniter :

1.      Buka Sublime Text 3 à File à Open Folder à arahkan ke folder ci_latihan di C:\xampp\htdocs\ci_latihan à klik Open. Pastikan yang dibuka seperti ini :

Gambar 4. Tampilan folder ci_latihan di Sublime Text 3

2.      Kemudian kita buka “ci_latihan à application à config” dengan cara collapse simbol.

3.      Setting yang pertama, yaitu “autoload”.

Buka file “autoload.php” di folder config. Cari cooding ini :

$autoload['helper'] = arrayu('');

ubah  jadi

$autoload['helper'] = array('url');

4.      Setting yang kedua tentang “base_url”.

Buka file “config.php” di folder config, kemudian cari cooding ini :

$config['base_url'] = '';

ubah menjadi seperti ini :

$config['base_url']  =  "http://".$_SERVER['HTTP_HOST'];
$config['base_url'] .= preg_replace('@/+$@', '', dirname($_SERVER['SCRIPT_NAME'])).'/';

/pre>

Copy paste ajah ndapapa :D :D, kalau yang males ngetik wkwk

5.      Setting yang ketiga tentang “penghapusan index.php”

Buat file baru dengan nama “ .htacces ” . Klik kanan folder ci_latihan à New file à simpan dahulu dengan Ctrl + S à beri nama “ .htacces “. Kemudian isikan dengan cooding ini à save lagi “Ctrl+S” :

RewriteEngine On
#RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) index.php/$1

6.      Untuk pembuktian sudah jadinya. Kita buat file controller baru di “ci_latihan à application à controllers” . Kemudian klik kanan di controller à New File à kasih nama “Beranda.php” à simpan. Lalu masukan cooding ini :

                   langkah ke 6,  kalian sudah bisa mempraktekan membuat controller baru.

7.      Langkah terakhir.

Buka Browser kesayangan kalian. Kemudian akses alamat ini “ http://localhost/ci_latihan/Beranda “. Hasil akhirnya kegini :

Gambar 5. Testing controller beranda di browser

Note : (lihat label angka hijau ) 1 adalah nama servernya, 2 nama foldernya, dan 3 nama cotrollernya

Sampai detik ini kalian sudah bisa untuk seeting codeigniter awal dan juga sudah mengenal controller. Okey gan? Paham? :D :D Praktekin dong jangan diliat ajah.

Yaa begituh tutorial tentang “Setting base_url dan Menghilangkan index.php – Setting Awal Codeigniter” , semoga bisa lebih paham. Aamiin. Jangan lupa ikuti terus blog ini dan subscribe di channel saya. Thanks for your attention, Akhir kata Wassalamu’alaikum Wr-wb.

Apa Itu Codeigniter Dan Bagaimana Cara Installnya ?

Assalamu’alaikum Wr-wb.

Hallo guys, kembali lagi bersama saya Admin kece :D . Kali ini kita akan membahas tentang Codeigniter.

Apa itu Codeigniter? Makanan khas mana tuh?

Yups, bagi orang awam tentu tidak tau, dan mulailah asumsi pertanyaan macam itu :D .

Jadi Codeigniter adalah salah satu framework atau kerangka kerja yang digunakan dalam pemrograman berbasis Website yang menggunakan konsep MVC (Model View Controller) dan OOP (Object Oriented Program) .Pencipta dari Codeigniter adalah Rick Ellis yang merupakan seorang programmer, desainer, fotografer, seniman bela diri dan musisi [1].Dengan framework yang sudah tertata aturannya pasti memudahkan seorang pemrogram untuk membuat program tanpa harus setting dari awal.

Perlu diketahui bahwa Codeigniter merupakan framework no 1 yang sering digunakan di Indonesia [2] dan merupakan framework PHP.

Beberapa alasan menggunakan Codegniter adalah [3] :

1. File yang berukuran sangat kecil untuk fitur yang komplit.
2. Dokumentasinya yang lengkap
3. Didukung banyak forum atau komunitas codeigniter di dunia, dsb.

          Yaps.. demikian cerita singkat tentang codeigniter. Masih belum paham..? Samaa.. haha tapi itu dulu saat belum tau tentang web (curcol). Yaa pada intinya untuk kita tau kita harus mengenalnya.

           Langsung saja, cara Installnya gimana si ?

           Siapin dulu alat-alatnya .. uih alaaat :D

1. PC atau Laptop yang kalian punya. Nda bisa pake smartphone yah :D
2. Pasti kita harus punya file Codeigniter-nya dulu, download di website resminya. 
3. Saya menggunakan XAMPP sebagai servernya. Belum punya ? download . Note : versi recommended PHP Codeigniter adalah 5.6 atau terbaru lebih baik 

Setelah disiapin semua pasttiin codeigniter berisi folder  seperti ini :

Untuk XAMPP yang baru download segera install dan ikuti step by stepnya. Setelah itu pastiin Apache dan Mysql aktif seperti ini:

Jika belum klik ajah start.

            Langkah selanjutnya adalah

• Buat folder di htdoc, anggap saja Namanya “ci_latihan” di directory C:\xampp\htdocs
• Pindahkan folder application , system dan file index.php di folder codeigiter yang sudah didownload ke folder “ci_latihan”

Hasil akhirnya seperti ini :

Note : asumsi install xampp di directory C , jika install di directory lain, silakan menyesuaikan

Naaah, tinggal jalanin codeigniter di browser kesayangan kammu. Akses dengan url seperti ini : http://localhost/ci_latihan/

Dan jika berhasil, hasil akhirnya seperti ini :

Horeee.. akhirnya sampai tahap ini kalian bisa tau dan bisa menginstall Codeigniter di Komputer kalian. Dan jangan lupa mengucap syukur kepada Allah SWT atas nikmatnya.

Next posting akan lebih seru lagi membahas tentang codeigniter. Thanks telah mengunjungi blog ini, semoga bermanfaat. Akhir kata Wassalamu’alaikum Wr-wb.

Jangan lupaa follow yaa untuk update tutorial selanjutnya. .


DAFTAR PUSTAKA

[1] https://www.codepolitan.com/rick-ellis-tokoh-dibalik-framework-codeigniter

[2] https://www.infanthree.com/2018/framework-php-terbaik-2018/

[3] https://codeigniter.com/