Gabriel Solomon Sitanggang: Pemrograman Berbasis Kerangka Kerja A

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 :

XAMPP

Data Diri

Sekian penjelasan tugas 8 saya, mohon maaf jika ada kekurangan. Terima Kasih.

Gabriel Solomon Sitanggang

Selasa, 14 Juni 2022

Pemrograman Berbasis Kerangka Kerja A | Tugas 8

IMPLEMENTASI MVC (MODEL, VIEW, CONTROLLER) MENGGUNAKAN CODE IGNITER

PEMBUATAN DATA DIRI

Tidak ada komentar:

Posting Komentar

Pemrograman Web C | EAS

Laporkan Penyalahgunaan