oT PRESENCE OE PPCM Cp (Membuat Tampilan Form Login)STEP BY STEP PENGGABUNGAN ADMINLTE DENGAN CODEIGNITER (MEMBUAT TAMPILAN FORM LOGIN) e-Book ini dibuat berdasarkan kesulitan yang Penulis hadapi saat memulai belajar Codeigniter. Basis pemrograman penulis selama ini adalah pemrograman desktop dengan menggunakan Microsoft Visual Foxpro, seiring dengan perkembangan teknologi pemrograman yang banyak mengarah ke pemrograman yang berbasis web database maka penulis pun bermaksud untuk meningkatkan pengetahuan ke arah pemrograman berbasis web yaitu dengan ‘menggunakan basis pemrograman PHP dan MySQL. Beberapa informasi penting yang penulis dapatkan di internet mengatakan bahwa mempelajari pemrograman PHP dan MySQL sebaiknya dimulai dari belajar dasar-dasar pemrogramannya. Setelah itu, untuk tingkat lanjut dimulai dengan mempelajari framework yang telah disediakan oleh banyak ahli-abli profesional PHP dan MySQL. Setelah melakukan banyak diskusi di beberapa forum dan dengan teman-teman yang telah banyak membuat aplikasi dengan PHP dan MySQL maka pilihan penulis jah ke framework Codeigniter. Penulis juga menginginkan tampilan (themes) yang menarik yang bisa langsung digunakan di Codeigniter, AdminLTE menjadi pilihan penulis untuk menemani belajar Codeigniter dikarenakan Themes buatan saudara Abdullah Almsaeed (semoga beliau selalu mendapatkan Rahmat dan limpahan kasih sayang dari Allah SWT) merupakan themes gratis yang terbaik menurut beberapa teman-teman penulis, Lalu bagaimana proses penggabungannya? Proses penggabungan akan dijelaskan secara bertahap. Proses tersebut dimulai dari proses download dan installasi komponen yang dibutulikan sampai pada teknik penggabungan form login AdminLTE ke dalam Codeigniter I. Download dan Install Server PHP dan MySQL Server PHP dan MySQL yang digunakan pada e-book ini adalah aplikasi XAMPP yang dapat didownload di htps://www.apachefriends.org/index.htm!. Langkah untuk download dan install server PHP dan MySQL adalah sebagai berikut: 1. Bukalah alamat link hups://www.apachefriends.org/index.html,What is XAMPP? XAMPP is the most popular PHP development ervironment XAMPP isa copie) ee, 245) otal Apache lstbuton Certara Manabi, Ph nd Pet. Ihe XAMP open source aca is bourse yp lot ae Uy 8 os ad oa XAMPP Pe) KAMP? to Windo 2 XAMPP fer Uinux & PP 08x 8 19 ee 38: vb were DSI) ou.TS (PHP S819) 2 2. Klik link download sesuai dengan OS yang anda miliki, penulis dalam hal ini mengklik link XAMPP for Windows. 3. Setelah proses download selesai, klik kanan pada file hasil download yaitu xamppwin32- §.6.15-1-VC1-installer.exe (nama file ini bisa berubah sesuai dengan versi terbaru yang ada pada web apachefriends.org). Selanjutnya pilih sub menu Run as administrator agar file ini dijalankan dalam mode administrator. Name Date modified Type Size ‘xampp-nin32-5.6.15-1 2eina DOADG IA “Andlieation 111.436 KE ‘Troubleshoot compatibility Pinto Start 7-Lip > Gambar 1, Menjalankan XAMPP 4, Jika ditampilkan jendela UAC (User Account Control) pilih Yes 5. Jika ditampilkan jendeta peringatan (Warning) tekan OK. Warning ¥ ee ee ee ae a Shetinctions of XAMDP ore poss sesced With UAC plese vento install KAMPP to CA\Program Fils (86) (missing write pesrisssions) Or deactivate UAC with msconfig ater this setup. a Gambar 2. Waming UAC 6. Pada Jendela SETUP, klik tombol OK,Setup -XAMPP Welcome o the XAMEP Setup Wizerd, © bitnami tad Gambar 3. Setup XAMPP 7. Klik tombol Next. 8. Pada bagian Select Components, klik tombol Next. [sep - o x Select Components fa Select the components you want otal dea the components you donot want to tal. Chk Next when you ate ready ty contre. Ed Seve Cickon aconponent to get a deta descrption toad Foca. © Rezta rt Server ©] Merry Mal Server Tomcat am Languages are Pert El Borantainies D phomyAdmin Gl Webster EA Fate Sera xANPP Taster cancel | Gambar 4. Setup ~ Select Components9. Pada Jendela Installation Folder, jangan pilih drive C. Pilihlah drive yang lain sebagai contoh drive D (dalam hal ini, folder saya berinama XAMP2017). Bi XAMPP Install Bock Next> Genel | | Gambar 5. Setup ~ Installation Folder 10, Selanjutnya, klik tombol Next. 11, Pada jendela Bitnami for Xampp hilangkan tanda centangnya, kemudian klik tombol Next. Pada jendela Ready to Install, klik tombol Next, kemudian secara otomatis akan ditampilkan jendela proses install dilaksanakan seperti gambar di bawah ini,@ setup - a x Welcome to XAMPP! XAMPP is an easy to install Apache distribution containing MySQL, PHP and Perl Instaling ThisPC > DATABASE (D:) > ads Gambar 9, Lokasi Penyimpanan Xampp Server 2. Didalam folder d:\xamp2017, klik kanan file xampp-control.exe, kemudian pilily sub menu Run as Administrator. Jika ditampilkan jendela konfirmasi tekan tombol Yes.“Name Date modi * (Sitest_php.bat * : — Di uninstalldat * = * @lxampp_shell.bat * Brampp.tatece Troubleshoot compatibility Pinto Star 7-ip ‘Ey sampp-controtin Gambar 9. Menjalankan aplikasi Xampp-control 3. Kemudian secara otomatis akan ditampitkan jendela Xampp Control Panel seperti gambar 8. Aktifkan server PHP (Apache) dan database (MySQL) dengan menckan tombol Start pada barisnya masing-masing. EB xawnr conto Panelv3.22 | Compl: Nov 122015] =o x XAMPP Control Panel v3.2.2 odes Service Module PIDs) Ports) Actions | @nastt x] Antena Bas) | cong || toge | | tal Stet x] -Mysal_- | Tombol Start GRE) [contig | [Loos | | Exoorer untuk memulai Be) Fm | cover PHP dan Rae) [cont | [tose | [Services ecuy | MySQL Hae [cont || tome | [eo vs | Tomeat FABRE [cents | [toss | [row Gambar 10. Tombol Start Apache dan MySQL 4. Jika pada saat tombol Start ditekan ditampilkan jendela konfirmasi Windows Security Alert, klik tombol Allow Access.W Windows Security Alert x Seana Windows Frewal has blocked some features of Apache HTTP Server on al public and private: retorts, vane oa Sy MEL, tanta rats Debane20.7 echt xe ‘Alow Apache HTTP Server to communicate on these networks: Private networks, such as my home or work network [Zublc networks, such as those in aports and coffee shops (not recommended because these networks often have litle or no secunty) hat are the eke of aloning an app through a frewal? Gambar 11. Windows Security Alert 5. Jika server Apache dan MySQL berhasil dijalankan, maka tampilannya akan nampak seperti gambar di bawah ini. fl XAMPP Control Panel v3.2.2 | [contig | | Loos i Config Logs: Gambar 12. Server Apache dan MySQL berhasil dijalankan / diaktifkan 6. Bukalah aplikasi browser (disarankan Mozilla atau Chrome), kernudian ketikkan alamat http://localhost pada kotak address-nya. Jika tidak ada masalah, maka halaman utama Xampp akan ditampilkan seperti gambar di bawah ini.Bh viecometoxamer =x € @ llocainost/dasnooa ¢ Nana [) XAMPP Apache + MariaDB + PHP + Perl Gambar 13. Halaman — Welcome to Xampp (locathost) 7. Untuk memastikan apakah database MySQL dalam hal ini versi MariaDB bisa dijalankan, kliklah link phpMyAdmin. Apabila ditampilkan gambar dibawah ini maka server Apache dan MySQL telah berhasil terinstall dan dapat dioperasikan, ‘oi localhost /127.0.0.1|php.. X | ae €_ & localhost/phpmyadeni © Search we *+@# oH phpMyAdmin 2e Recent Favoites j Databases LJ SOL Status 25 User accounts > More ag New + Senet: 127.0041 via Tope + Sener type: MaiaD + Sever vesion: 10.19 ‘Maris ~ mania org binary dition + Protocol version: 10 # User. wot@ecalhost ae Snr chara UTE Gambar 14, Halaman ~ phpMyAdmin (4 infomation. schema Ga os eG pertermance schema Gg phomyadmin Ge tt asombs unicode @ gy 8. Proses installasi server PHP (Apache) dan MySQL selesai dilakukan. IL. INSTALLASI FRAMEWORK CODEIGNITER Setelah kita memiliki server PHP dan MySQL, maka langkah berikutnya adalah melakukan installasi framework Codeigniter. Langkah installasinya adalah sebagai berikut: 1. Download framework Codeigniter pada alamat http://www.codeigniter.com,& bere (elie DUTe reer ers men Core e Fesar Fico J) rron | sot eg Read the Manual (Clear documentation Gambar 15. Halaman ~ Codeigniter.com 2. Klik link download. 3. Apabila proses download telah selesai, extractlah file tersebut dengan menggunakan aplikasi WinZip, WinRar atau 7-zip (penulis menggunakan 7-zip). Caranya, Klik kanan pada file hasil download lalu pilih pilihan menu 7-2ip, lalu klik sub menu Extraet Here. Name Ontemedfied ype Soe pen with Subsime Tet ‘onc Pinte Stat B Scan With Smad Q wire Open wth estore previous versions og thistle? Gambar 16, 7-zip Extract file framework Codeigniter4, Tunggu sampai proses selesai, maka anda akan mendapatkan sebuah folder baru dengan nama Codeigniter-3.0.4. Copy folder ini ke directory atau alamt penyimpanan 4:\wamp201\htdocs. Hasilnya, dapat dilihat pada gambar di bawah ini > xamp2017 > htdocs > Name Dateme 29/0112 | dashboard [img Date created: 29/01/2016 19.18 Size: 10,4 MB % [Bi websicer Folders: application, system, use 6 Files: giignore, composerjson, xampp tions htm a7j0ay2 . © api Gambar 17. Hasil Copy Codeigniter ke dalam hidocs 5. Ganti nama folder codeigniter-3.0.4 menjadi eiadminlte yang merupakan singkatan dari Codeigniter with Admintte. 6. Buka aplikasi browser mozilla, kemudian coba panggil alamat locathost/ciadminlte. Hasilnya dapat dilihat pada gambar dibawah ini. Wekometo Codslgriter x VE € |B | localhost/ciacinttey Search YB OL & >» Welcome to Codelgniter! The page you are looking at is being generated dynamically by Codelgniter ff you would lke to edit this page youll find it located at application/views/welcome_nessage.pop The corresponding controller for this page is found at application/controtiers/elcome php ff you are exploring Codelgniter forthe very fist time, you should start by reading the User Guide endered in 0.0341 seconds. Codelgnter Version 30.4 Gambar 18. Halaman - locathost/ciadmintte7. Installasi framework Codeigniter selesai, IV. Membuat Halaman LOGIN Dengan AdminLTE Setelah installasi server PHP dan MySQL selesai, lalu diikuti dengan installasi framework Codeigniter. Berikutnya penulis akan mencoba menjelaskan teknik pembuatan form login sederhana dengan menggunakan tema (themes) yang ada pada AdminLTE. Referensi teknik ini berdasarkan beberapa video yang ada di youtube. Langkahnya adalah: 1. Download dulu tema AdminL.TE pada alamat web https://www.almsacedstudio.com. Versi yang tercantum di website AdminLTE pada saat didownload adalah versi 2.3.2 (29/01/2016 ~ 21:30), namun pada filenya tertulis dengan nama AdminLTE+2.3.0.zip. Extractlah (extract here) file AdminLTE-2.3.0.2ip sehingga terdapat sebuah folder yang. berisikan extract dari tema AdminLTE seperti gambar berikut: Name Date modified Type si amazed 3 avai 1920 FEE 20120162132 “ Codelgniter 2 04zip 24/01/2016 08.25 Compress ipp. % xampp-win32-56.15-1-VCIV-installenexe 24/01/20160209 Applicaton Gambar 19, Extract tema AdminL TE 3. Editlah file ~—autoload.php yang terletak_-—didalam folder: \xamp2017\ [J anonymous (1 apache D cgitin 3 eonstents,php 1 contrib 1 database.php. (0 FitezintaeTe U0 doctypes.php [B bidocs 1 foreign. harsphp [Bl cedminte Oo Hest a 1 specaton —— () migration.php. {contig > 1 mimesphp LT controllers ( profilenphp Gambar 20. Lokasi file autoload.php4, Buka file autoload.php dengan menggunakan aplikasi text editor seperti notepad, notepad plus atau sublime text. Kemudian cari bagian Sautoload{*helper’] dan ganti kodenya seperti di bawah ini Sautoload(*nelper*| = array(*url'); Auto-load Helper Files Prototype: $autoload{‘helper’] = array(‘url’, ‘File’); Auto-load Config files $autoload{ ‘config’] = array(‘configi", ‘config2"); r | | | | | NOTE: This item is intended for use ONLY if you have created custo | config files. Otherwise, leave it blank. | / $autoload[ ‘config’ ] = array( Gambar 21. Bagian kode yang diubah dalam file autoload,php 5. Simpan perubahan pada isi file autoload.php. 6. Buka file eonfig.php, cari bagian $config{ base_url’] dan ganti kodenya seperti di bawal ini feontigi"base_uri"] = ‘hesp://localhost/cLadninite/"; 7. Kemudian simpanlah perubahan tersebut. 8. Buka file router.php, cari bagian Sroute('default_controller'] dan ganti kodenya seperti di bawah ini. aogin'; Perhatian! setelah kode ini disimpan maka didalam folder: \htdoce \cladminite\epplicatien\zontroilers harus ada file dengan nama els_login.php.9. Selanjutnya \xamp2017\ntdoce \ciadnintte\. buka file Welcome.php yang terdapat_ didalam folder Isi file Welcome.php adalah: PATH") OR exit ('No dir wap. netp://exanple: ng URL sn/tndex.php/weleane pt//exanple.com/ index.php /weleene/index ot prefixed with an underscore 10, Ganti dan rubah isi file Weleome.php menjadi sebagai berikut: * 30/01/2016 05.58 vads * “Type: PHP File olan Size: 178 bytes pois. 07.09 oe it Date madified: 30/01/2016 05.58 Gambar 22. Lokasi file cls_login.php 12. Selanjutnya buatlah file baru dengan isi kode sebagai berikut: cbeml> chead> e>Agplic n Login Versi 1.0 mpan dengan nama file vw_logi -php ke dalam folder : D:\xamp201 7\btdocs \eladminlte\application\views ie Name 6 4 Bens oads 2 nents * : I : “Di welcome mesage php Gambar 22. Lokasi file vw_login.php 14, Setelah anda menyimpan file vw_I php cobalah untuk memanggil kembali alamat hittp:/Mocalhost/ciadminlte_melalui browser movilla, hasilnya akan nampak seperti gambar di bawah ini Bi Application Login Versi.0 xX € | ® | locathost/ciacminitey Login versi 1.0 Gambar 23. Tampitan Login versi 1.016. 17. 18, 19. 20. 21 Jika gambar 23 tidak tampil seperti yang diharapkan, coba periksa kembali file autoload.php, config.php dan routes.php apakah ketiga file ini isinya telah diedit sesuai dengan perintah-perintah sebelumnya. Cek juga apakah file els login.php dan yw_login.php ada ? isinya telah benar? dan telah disimpan pada folder yang tepat. Jika semua sudah OK, mudah-mudahan tidak ada masalah dan tampilan gambar 23 dapat anda lihat AdminLTE telah menyediakan contoh-contoh file untuk membuat beberapa form salah satunya adalah form Login. Berikut kita akan coba melakukan editing dan penyesuaian isi file vw_login.php dengan isi file yang ada pada login.html pada folder AdminLTE yaitu: _ Name x @) 404.btmt ads @s00himt ws pf blanichtmt | invoices (g) invoice-print html Bt ockiccamcbrol sinlte_codeigniter [ 6) login.ntral |) b @ profiel Gambar 24, Lokasi file login.hem! File login.html merupakan file contoh form login yang telah disediakan di dalam AdminLTE. Buka file login.htm. ‘Tekan CTRL + A (untuk memblok seluruh isi) ‘Tekan CTRL + C (untuk mengcopy seluruh isi ke clipboard atau memory sementara) Buka file vw_login.php. (D:\xamp2017\hidocs\ciadminite\application\views) ‘Tekan CTRL + A (blok seluruh isi vw_login.php) ‘Tekan CTRL + V (untuk paste seluruh code login.htm dari clipboard, Jadi seluruh isi yw_login.php di overwrite (ditimpa) dengan seluruh isi code yang ada pada file login.htm, Kemudian simpan kembali file vw_login.php Buka browser, dan panggil alamat hitp://localhosU/ciadminlie, Hasilnya akan nampak seperti gambar di bawah ini.yang kedua yang dilengkapi dengan contoh kasus aplikasi sederhana mulai dari tahapan login, pengolahan database, pembuatan laporan sampai kepada proses logout. DAFTAR PUSTAKA - www.codeigniter.com - wwwaapachefriends.org - wwwaalmsacedstudio.com - Spesial Thank's Om Mh Nufail hhups://www. youtube.com/channel/UCUh2a28prNGHz0diNyq_6vg = Mbah google - Om Kaskus ~ Kk tb - Tante twit - Wak Line ~ Dan semua teman-teman yang kenal, dikenal maupun yang tidak kenal yang telah mempersembahkan (sharing) semua ilmunya di blog dan berbagai jaringan lain di internet. Semoga menjadi amal jariah disisiNya, aaaamiiiin,