Skip to main content

Install dan Buat Web Sederhana Dengan CodeIgniter

Di postingan sebelumnya saya sudah menjelaskan tentang CodeIgniter, kali ini saya akan menerangkan bagaimana instalasi dan membuat web sederhana dengan MVC model CodeIgniter.

Pertama Download file CodeIgniter di https://www.codeigniter.com/

Kemudian Copy Zip File CodeIgniter ke "C:\xampp\htdocs\" jika kamu menggunakan Xampp atau "C:\Appserv\www\" Jika kamu menggunakan Appserv, Kemudian Extract File nya


 Rename folder yang di extract tadi dengan nama "codeigniter"


Ubah settingan pada file "C:\xampp\htdocs\CodeIgniter\application\config\config.php" menjadi seperti di bawah ini



Jika sudah, masuk ke "localhost/codeigniter" di browser kamu, jika langkah kamu benar maka akan keluar halaman seperti di bawah, selamat kamu telah berhasil menginstall codeigniter, sekarang mari kita lanjutkan dengan membuat halaman dengan metode ini


Ubah 'default_controller' pada file "C:\xampp\htdocs\CodeIgniter\application\config\routes.php", ini adalah pengaturan file yang akan di panggil pertama kali ketika kita mengakses halaman web yang kita buat.sebagai berikut.


Kemudian buat file baru di folder "C:\xampp\htdocs\CodeIgniter\application\controllers\" dengan nama "main.php".


Isi dengan script ini :

<?php if (!defined('BASEPATH')) exit('Access Denied');
class Main extends CI_Controller {
public function __construct()
{
parent::__construct();
}
public function index()
{
$this->home();
}
public function home()
{
$this->load->view('home'); //memanggil view home.php
}
public function kuliah()
{
$this->load->view('kuliah'); //memanggil view kuliah.php
}
public function kerja()
{
$this->load->view('kerja'); //memanggil view kerja.php
}
public function aboutme()
{
$this->load->view('aboutme'); //memanggil view aboutme.php
}
public function contact()
{
$this->load->view('contact'); //memanggil view contact.php
}
}

Kemudian buat lagi file "home.php","kuliah.php","kerja.php","aboutme.php" dan "contact.php" di dalam folder "C:\xampp\htdocs\CodeIgniter\application\views"


Dan isikan script sebagai berikut :

<!DOCTYPE html>
<html><head><title>Website ku</title><link rel="stylesheet" type="text/css" href="http://localhost/codeigniter/assets/style.css"></head>
<body>
<div id="container">
<div id="image"></div>
<div id="header">
<ul>
<li><a href="http://localhost/codeigniter/">Home</a></li>
<li><a href="http://localhost/codeigniter/index.php/main/kuliah">Kuliah</a></li>
<li><a href="http://localhost/codeigniter/index.php/main/kerja">Kerja</a></li>
<li><a href="http://localhost/codeigniter/index.php/main/aboutme">About Me</a></li>
<li><a href="http://localhost/codeigniter/index.php/main/contact">Contact</a></li>
</ul>
</div>
<div id="nav" class="widget">
<ul>
<li><a href="http://localhost/codeigniter/">Home</a></li>
<li><a href="http://localhost/codeigniter/index.php/main/kuliah">Kuliah</a></li>
<li><a href="http://localhost/codeigniter/index.php/main/kerja">Kerja</a></li>
<li><a href="http://localhost/codeigniter/index.php/main/aboutme">About Me</a></li>
<li><a href="http://localhost/codeigniter/index.php/main/contact">Contact</a></li>
</ul>
</div>
<div id="section">
<h1>Web pertamaku</h1>
<h2>Ini adalah web pertamaku dengan CodeIgniter Framework</h2>
</div>
<div id="footer">Copyright &copy; STT-Ibnu Sina Batam.</div>
</div>
</body>
</html>

Buat file css nya dengan folder baru di "C:\xampp\htdocs\CodeIgniter\assets" dengan nama "style.css"


Dan isi script berikut :

#container
{
    width:1050px;
    margin:0 auto;
    background:#fff;
    border-radius:25px;
-moz-border-radius:25px;

}

#image
{ background-image:url(http://localhost/codeigniter/images/header.jpg);
text-align: center;
    width:1050px;
    height:150px;
    border: 2px solid #47c9af;
border-radius:25px;
-moz-border-radius:25px;
}

#header,
#header ul,
#header ul li,
#header ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#header:after,
#header > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#header {
  width: auto;
  border-bottom: 3px solid #47c9af;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#header ul {
  background: #ffffff;
}
#header > ul > li {
  float: left;
}
#header.align-center > ul {
  font-size: 0;
  text-align: center;
}
#header.align-center > ul > li {
  display: inline-block;
  float: none;
}
#header.align-right > ul > li {
  float: right;
}
#header.align-right > ul > li > a {
  margin-right: 0;
  margin-left: -4px;
}
#header > ul > li > a {
  z-index: 2;
  padding: 18px 25px 12px 25px;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  color: #444444;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  margin-right: -4px;
}
#header > ul > li.active > a,
#header > ul > li:hover > a,
#header > ul > li > a:hover {
  color: #ffffff;
}
#header > ul > li > a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 120%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  content: "";
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transform: perspective(5px) rotateX(2deg);
  -webkit-transform-origin: bottom;
  -moz-transform: perspective(5px) rotateX(2deg);
  -moz-transform-origin: bottom;
  transform: perspective(5px) rotateX(2deg);
  transform-origin: bottom;
}
#header > ul > li.active > a:after,
#header > ul > li:hover > a:after,
#header > ul > li > a:hover:after {
  background: #47c9af;
}

/* Sidebar */
#nav {
width:200px;
padding: 10px;
margin: 10px 0px 10px 5px;
color: #424242;
background-color :#e8e8e8;
float: left;
}

/* Widget */
.widget {
width : 100%;
padding : 0px;
margin-bottom : 20px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
  border-radius: 2px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.widget-title {
color: #fff;
background-color: #47c9af;
padding: 0px 20px;
height : 30px;
line-height : 30px;
display : block;
border : none;
}

.widget-title h3 {
font-family: Arial;
font-weight : bold;
font-size: 12px;
letter-spacing : 0.5px;
text-transform : Uppercase;
}

.widget ul {
list-style: none;
background: #fff;
padding: 5px 0 5px 0;
border: none;
}

.widget li {
border-bottom: 1px dotted #47c9af;
padding: 8px 15px;
color: #666;
}

.widget li:last-child {
border-bottom: none;
}
/* Link Widget */
.widget li a {
color: #444;
text-decoration : none;
}

.widget li a:hover {
font-weight : bold;
color : #ff6c00;
}

#section
{
text-align: justify;
padding-left: 20px;
width:800px;
float:left;
position: relative;
}

#footer
{
background-color:#47c9af;
color:white;
text-align:center;
padding:5px;
clear:both;
border-radius:25px;
-moz-border-radius:25px;
}

Buat folder di "images" di dalam codeigniter isi dengan gambar header kamu, simpan dengan nama "http://localhost/codeigniter/images/header.jpg", jika kamu benar maka hasilnya akan seperti dibawah ini.

Kamu bisa mengkreasikan web dengan codeigniter dengan panduan diatas selamat mencoba, jika belum mengerti berikut saya sertakan filenya. silahkan di download.

DOWNLOAD
Labels:

Comments

Post a Comment

Popular posts from this blog

Penerapan PHP Dalam Kode HTML

PHP hanya mengeksekusi kode yang ditulis dalam pembatas sebagaimana ditentukan oleh dasar sintaks PHP. Apapun di luar pembatas tidak diproses oleh PHP (meskipun teks PHP ini masih mengendalikan struktur yang dijelaskan dalam kode PHP.  Pembatas yang paling umum adalah  " <?php " dan u ntuk menutup kode PHP " ?> ". Tujuan dari pembatas ini adalah untuk memisahkan kode PHP dari kode diluar PHP, seperti  HTML , Javascript . Untuk pembuatan web, kode  PHP  biasanya di sisipkan kedalam dokumen HTML. Karena fitur inilah PHP disebut juga sebagai  Scripting Language  atau bahasa pemrograman  script . Sebagai contoh penggunaan PHP, misalkan kita ingin membuat list dari nomor 1 sampai nomor 10. Dengan menggunakan HTML murni, kita bisa membuatnya secara manual seperti kode berikut ini: <!DOCTYPE html> <html>    <head>       <title>Contoh list dengan HTML</title>    ...
Post a Comment
Read more

Perancangan Ruang Server

Perlunya Memiliki Server dan Ruang Server Sendiri A. Alasan Memiliki Server & Ruang Server Sendiri Pembangunan Gedung D pada STT Ibnu Sina akan menambah jumlah user pada fasilitas E-learning dan akses website STT Ibnu Sina lainnya. Hal tersebut tentu akan menambah beban jaringan atau Bandwidth yang dibutuhkan untuk menyimpan content pada E-learning dan Website STT Ibnu Sina, seperti modul tugas dan Data Kemahasiswaan. Berikut beberapa keuntungan jika STT Ibnu Sina memuliki Server dan ruang Server sendiri : Mempermudah baik pihak pengurus STT Ibnu Sina Batam maupun mahasiswa dalam mengatur dan mengakses data dan informasi Kerahasiaan data dan informasi terjaga dalam server. Mengurangi biaya internet karena situs STT Ibnu Sina yang di akses melalui jaringan yang ada di STT Ibnu Sina akan menggunakan jaringan local, sehingga tidak membutuhkan akses internet Mempermudah mahasiswa khususnya teknik informatika untuk belajar langsung tentang server, data center dan kegunaann...
1 comment
Read more

Memanggil file CSS ke Halaman HTML

Postingan sebelumnya saya menjelaskan tentang halaman html sederhana dengan layout CSS , yang mana Script CSS di gabungkan ke halaman HTML, kali ini saya akan menjelaskan bagaimana memisahkan file CSS dan cara memanggil file tersebut di halaman HTML. Pertama lihat kembali ke halaman html, buka dengan editor kamu. <!DOCTYPE html> <html> <head> <style> #header {     background-color:black;     color:white;     text-align:center;     padding:5px; } #nav {     line-height:30px;     background-color:#eeeeee;     height:300px;     width:100px;     float:left;     padding:5px; } #section {     width:350px;     float:left;     padding:10px; } #footer {     background-color:black;     color:white;     clear:both;     text-align:center;     padding:5px...
1 comment
Read more