IMPLEMENTASI MVC (MODEL, VIEW, CONTROLLER) MENGGUNAKAN CODE IGNITER
Pada artikel ini, saya akan membuat halaman web yang berisikan profil diri dengan menggunakan CodeIgniter. Sebelumnya, unduh terlebih dahulu Code Igniter pada link berikut :
Code Igniter
Kemudian unduh XAMPP pada link berikut :
XAMPP
Untuk pengimplementasiannya, saya mengikuti tutorial yang ada di web berikut
Tutorial
PEMBUATAN DATA DIRI
- Masukkan folder Code Igniter yang telah didownload ke dalam xampp/htdocs, lalu rename folder menjadi Tugas8 (penamaan folder bebas)
- Buka folder Tugas8 menggunakan Visual Studio Code
- Buka file application/controllers/Welcome.php. Tambahkan route /profile/ didalam controllers welcome dengan method profile dibawah method index seperti kodingan dibawah
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller {
/**
* Index Page for this controller.
*
* Maps to the following URL
* http://example.com/index.php/welcome
* - or -
* http://example.com/index.php/welcome/index
* - or -
* Since this controller is set as the default controller in
* config/routes.php, it's displayed at http://example.com/
*
* So any other public methods not prefixed with an underscore will
* map to /index.php/welcome/<method_name>
* @see https://codeigniter.com/user_guide/general/urls.html
*/
public function index()
{
// fungsi untuk me-load view welcome_message.php sebagai index
$this->load->view('welcome_message');
}
public function profile()
{
// fungsi untuk me-load view profile.php
$this->load->view('profile');
}
}
asdf
- Buka file application/config/routers.php dan tambahkan kode route untuk profile
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$route['default_controller'] = 'welcome';
$route['profile'] = 'welcome/profile';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;
- Buka file application/views/welcome_message.php dan tambahkan kode program sebagai berikut
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Gabriel's Bio</title>
<style type="text/css">
body {
margin-top:20px;
color: #000;
text-align: left;
background-color: #e2e8ff;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
background-color:#ffffff;
}
.title {
color: #000000;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #7FCDCD;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
color: white;
}
a {
text-decoration: none;
font-size: 22px;
color: black;
}
button:hover, a:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<h2 style="text-align:center; font-family:Arial;">User Profile Card - Tugas PBKK A</h2>
<div class="card">
<img src="https://media-exp1.licdn.com/dms/image/C4E03AQEY7pPDs-HSNA/profile-displayphoto-shrink_200_200/0/1632035278309?e=1660780800&v=beta&t=G2aQAJUf6x7cYCPkHYBcjNEUdCCML8Z75O2GkeVtDEQ" alt="Gabriel" style="width:80%">
<h1>Gabriel Solomon Sitanggang</h1>
<p class="title">Student at Informatics ITS</p>
<p>Institut Teknologi Sepuluh Nopember Surabaya</p>
<div style="margin: 24px 0;">
<a href="https://www.instagram.com/gabrielstg_/"><i class="fa fa-instagram"></i></a>
<a href="https://www.linkedin.com/in/gabriel-solomon-sitanggang-33b63521b/"><i class="fa fa-linkedin"></i></a>
</div>
</div>
<div class="row rofile-sm">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<div class="d-flex flex-column align-items-center text-center">
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card mb-3">
<div class="card-body">
<div class="row">
<div class="col-sm-9"><h4 class="mb-0">Tugas PBKK A</h6></div>
</div>
<hr>
<div class="row"><div class="col-sm-3"><h6 class="mb-0">Nama Lengkap:</h6></div><div class="col-sm-9 text-secondary">Gabriel Solomon Sitanggang</div></div><hr>
<div class="row"><div class="col-sm-3"><h6 class="mb-0">Tanggal Lahir:</h6></div><div class="col-sm-9 text-secondary">31 Juli 2002</div></div><hr>
<div class="row"><div class="col-sm-3"><h6 class="mb-0">Email:</h6></div><div class="col-sm-9 text-secondary">gabrielsitanggang38@gmail.com</div></div><hr>
<div class="row"><div class="col-sm-3"><h6 class="mb-0">Nomor Telepon:</h6></div><div class="col-sm-9 text-secondary">082276563699</div></div><hr>
<div class="row"><div class="col-sm-3"><h6 class="mb-0">Alamat:</h6></div><div class="col-sm-9 text-secondary">Keputih Utara, Surabaya</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
asdfasd
Untuk dokumentasi Tugas 8 ini dapat dilihat sebagai berikut :
Sekian penjelasan tugas 8 saya, mohon maaf jika ada kekurangan. Terima Kasih.
