Cara Membuat Galeri Foto Menggunakan Codeigniter
Muh. Ashhar Bustan

Cara Membuat Galeri Foto Menggunakan Codeigniter

Sebelumnya kita sudah membahas cara membuat galeri foto sederhana menggunakan HTML, CSS dan Javascript (baca disini). Sekarang kita akan mengimplementasikannya ke dalam Codeigniter.

Pertama: Buat Folder Project Dengan Nama 'galerifoto'

Baca Juga: Cara Membuat Sitemap News Google Menggunakan PHP


Kedua: Salin semua file codeigniter kedalam folder galerifoto

Ketiga: Buat folder assets didalam folder galerifoto

Keempat: Buat folder images didalam folder assets

Kelima: Letakkan file foto atau gambar ke dalam folder images

Perhatikan gambar di bawah:

 

Keenam: Ketikkan kode berikut menggunakan teks editor seperti Notepad++ atau Sublime dan simpan dengan nama main.css di dalam folder assets.

body {
	background: #222;
	color: #eee;
	margin-top: 20px;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
a {
	color: #FFF;
}
a:hover {
	color: yellow;
	text-decoration: underline;
}
.thumbnails img {
	height: 80px;
	border: 4px solid #555;
	padding: 1px;
	margin: 0 10px 10px 0;
}

.thumbnails img:hover {
	border: 4px solid #00ccff;
	cursor:pointer;
}

.preview img {
	border: 4px solid #444;
	padding: 1px;
	width: 800px;
}

 

Ketujuh: Buat Controller

Baca Juga: Source Code Bridging SIMRS GOS Dan SEP BPJS Untuk Insert SEP Versi Terbaru Dengan PHP


<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Galeri extends CI_Controller {
	
	public function __construct(){
		parent::__construct();
		$this->load->helper('url');
	}
	
	public function index()
	{
		$this->load->view('galerifoto');
	}
}

 

Kedelapan: Buat View dan simpan dengan nama galerifoto.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Galeri Foto Sederhana Menggunakan Codeigniter</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/main.css">
</head>

<body>
<div class="gallery" align="center">
	<h2>Galeri Foto</h2>
	<br />

	<div class="thumbnails">
		<img onmouseover="preview.src=img1.src" name="img1" src="<?php echo base_url();?>assets/images/img1.jpg" alt=""/>
		<img onmouseover="preview.src=img2.src" name="img2" src="<?php echo base_url();?>assets/images/img2.jpg" alt=""/>
		<img onmouseover="preview.src=img3.src" name="img3" src="<?php echo base_url();?>assets/images/img3.jpg" alt=""/>
		<img onmouseover="preview.src=img4.src" name="img4" src="<?php echo base_url();?>assets/images/img4.jpg" alt=""/>
		<img onmouseover="preview.src=img5.src" name="img5" src="<?php echo base_url();?>assets/images/img5.jpg" alt=""/>
	</div><br/>

	<div class="preview" align="center">
		<img name="preview" src="<?php echo base_url();?>assets/images/img1.jpg" alt=""/>
	</div>

</div>
</body>
</html>

 

Kesembilan: Buka file config.php kemudian isi nilai variabel $config['base_url'] dengan http://localhost/galerifoto 

$config['base_url'] = 'http://localhost/galerifoto';

Kesepuluh: Selesai!

Hasilnya Seperti gambar dibawah:

 

DOWNLOAD SOURCE CODE LENGKAPNYA DI SINI

Baca Juga: Cara Menggunakan Template Bootstrap Colormag Sebagai Template Codeigniter


YANG LAIN:

Komentar

Cari Artikel Lainnya Disini