Codeigniter - Membuat Web Profile App

Beralih dari penggunaan .NET Framework, kali ini saya akan memposting tentang framework php yang sudah cukup terkenal yaitu Codeigniter. Codeigniter sendiri merupakan framework dengan ukuran yang kecil dan juga memberi kebebasan pada developer dalam melakukan pengembangan aplikasi webnya. Kelebihan utama dari Codeigniter antara lain memiliki size yang kecil dan ringan, menyediakan data validation dan form, query builder dan dukungan database, memiliki library pengolah gambar, dan lain sebagainya. Kali ini saya akan mencoba untuk membuat aplikasi web sederhana yaitu profile app. Untuk langkah-langkahnya sebagai berikut.

  • Download Composer dan lakukan instalasi.

Panduan untuk installer composer bisa dilihat di sini atau juga bila menggunakan linux bisa mengikuti langkah berikut ini.

sudo apt-get update
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

Untuk memastikan validasi dari installer yang telah didownload lakukan langkah berikut.

php -r "if (hash_file('sha384', 'composer-setup.php') === '756890a4488ce9024fc62c56153228907f1545c228516cbf63f885e036d37e9a59d27d63f46af1d4d07ee0f76181c7d3') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

Kemudian lakukan instalasi

sudo php composer-setup.php --install-dir=/usr/local/bin --filename=composer

Untuk memastikan agar composer telah terinstal bisa digunakan command berikut.

composer --version

Hasilnya kira-kira akan sebagai berikut bergantung pada versi composer yang diinstal

Composer version 2.0.13 2021-04-27 13:11:08
  • Buat project melalui terminal composer.

Bila berhasil, maka akan menampilkan keluaran dari versi composer yang terinstal, sebagai contoh kita akan membuat project dengan nama ci-pbkk, maka pada composer bisa kita ketikan command

composer create-project codeigniter4/appstarter ci-pbkk

Dari command tersebut, maka composer akan membuat folder ci-pbkk dan mendownload dependencies yang dibutuhkan.

  • Pada Views, buat file profile.php untuk menampilkan profil.

Untuk menambahkan halaman profile, kita buat sebuah file bernama "profile.php" yang berperan sebagai profile dari website kita. Untuk contoh code pada view sebagai berikut.

<head>
<!-- Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
<!-- Font -->
<link href="https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<title>Profile</title>
</head>
<body>
<div class="nav-bar" height=60>
<a class="active" href="../profile/">Profile</a>
</div>
<div class="main-content">
<div class="centered-title">
<h1>My Profile</h1>
</div>
<div class="split">
<div class="split-left back">
<img src="../img/profile-content-aware.jpg">
</div>
<div class="split-right welcome-content front color-1">
<h2>Hi!</h2>
<h1>I'm Ilham</h1>
</div>
</div>
<div class="break-section"></div>
<div class="split">
<div class="split-full front color-4" style="padding-top: 100px">
<p style="font-size: 28px">Hello, My name is Muhammad Ilham Bayhaqi. I'm 20 years old. I'm a student in Informatics Department of Institut Teknologi Sepuluh Nopember. So far, i've followed several competition like Competitive Programming and Capture the Flag. I'm currenly doing research about Brain Segmentation but soon will become a cyber security analyst. </p>
</div>
<div class="split-full back">
<img src="https://learn.withyouwithme.com/hubfs/Contentilo%20-%20284109%20-%20What%20does%20a%20Cybersecurity%20Analyst%20do%3F-2.jpeg" style="filter: brightness(30%);">
</div>
</div>
<div class="centered-title">
<h1>Contact</h1>
</div>
<div class="welcome-bg welcome-section"></div>
<div class="welcome-content welcome-section">
<h2>Lebih dekat dengan saya</h2>
<div class="horizontal-center">
<a href="https://www.facebook.com/" class="btn peach-gradient btn-rounded"> Say Hi in WhatsApp </a>
<a href="https://www.instagram.com" class="btn peach-gradient btn-rounded"> My Instagram Account </a>
</div>
</div>
</div>
<footer>
<p id="copyright">by Muhammad Ilham Bayhaqi - 2020</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
view raw Profile.php hosted with ❤ by GitHub

  • Tambahkan folder css, js, dan img pada folder public pada project root.

Untuk asset yang digunakan, kita bisa letakkan pada folder public dan pada view, kita bisa sambungkan link asset dari direktori / karena pada Codeigniter, folder public nantinya akan dijadikan DocumentRoot.

  • Membuat controller About dan melakukukan routing.

Pada folder Controllers, kita tambahkan file About.php dan arahkan untuk mengembalikan index pada view profile yang telah dibuat atau lebih jelasnya sebagai berikut.

<?php
namespace App\Controllers;
class About extends BaseController
{
public function index()
{
return view('profile');
}
}
view raw About.php hosted with ❤ by GitHub

Jangan lupa untuk menambahkan route pada Config/Routes.php sebagai berikut.

$routes->get('/about', 'About::index');
  • Deploy Web.

Agar web bisa diakses, maka kita bisa lakukan deployment menggunakan web server seperti Apache2 atau yang lainnya. Bila kita ingin melakukan deploy menggunakan Apache2, maka kita perlu untuk mengaktifkan mod rewrite pada Apache2 yaitu sebagai berikut.

sudo a2enmod rewrite

Selain itu untuk setelan pada sites-available, kita buat document root pada directory publik, contohnya

<VirtualHost *:80>
    ServerName myci.local
    DocumentRoot /var/www/myci.local/public
    <Directory /var/www/myci.local/public>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
    </Directory>
    ErrorLog /var/log/apache2/myci.local_error.log
    CustomLog /var/log/apache2/myci.local_requests.log combined
</VirtualHost>

Pada Config/App.php juga lakukan pengubahan baseURL menjadi URL web yang diinginkan. Kemudian, untuk mengubah App menjadi production, kita ubah pada file .env dengan menghilangkan tanda # pada CI_ENVIRENTMENT seperti berikut.

CI_ENVIRONMENT = production

  • Hasil
Hasil akhir bisa dilihat pada link berikut pbkk.flowradust.my.id

Komentar

Posting Komentar

Postingan Populer