Advertisement
  1. Code
  2. PHP

Subdomain Bergaya Basecamp dengan CodeIgniter

Scroll to top
Read Time: 12 min

() translation by (you can also view the original English article)

CodeIgniter adalah framework PHP sederhana dan ringan yang digunakan untuk membuat aplikasi web yang kuat. Hari ini, kita akan melakukan sesuatu yang bagus: kita akan menggabungkan nama pengguna dan subdomain untuk membuat pengalaman pengguna yang lebih kohesif.

Jika Anda agak bingung, fitur ini memungkinkan pengguna Anda untuk mengakses akun mereka dengan mengetikkan url khusus, yang memetakan ke nama pengguna mereka, seperti harbinger.yourapp.com.


Ikhtisar

Dalam tutorial ini, kita akan membuat tampilan front-end dan tampilan aplikasi back-end, mirip dengan konfigurasi yang digunakan di Basecamp, di mana mengunjungi basecamphq.com menunjukkan homepage, tetapi mengunjungi subdomain menampilkan halaman login.

Kita akan menggunakan alamat fiktif nettutsapp.com, dan akan membuat halaman "dashboard" sampel; namun, Anda bisa memasukkan ini ke dalam proyek yang sudah ada dengan relatif mudah.

basecamp-comaprebasecamp-comaprebasecamp-comapre

Sebelum memulai, pastikan Anda memiliki server web dengan PHP yang diinstal. Anda juga perlu mengunduh CodeIgniter; pada contoh, saya menggunakan CodeIgniter 2.0, tetapi kode harus bekerja pada 1.7.2. Jadi, mari kita mulai!


Langkah 1: Konfigurasi DNS

Pertama, kita perlu mengkonfigurasi pengaturan DNS kita untuk membuat semua subdomain diselesaikan ke satu alamat. Jika Anda bekerja pada server nyata, maka Anda harus mengubah pengaturan DNS Anda dengan perusahaan yang menangani DNS Anda. Ini paling umum host web atau registrar domain Anda.

Untuk membahas setiap konfigurasi dalam tutorial ini akan memakan banyak waktu. Sebagai gantinya, minta bantuan host Anda untuk menyiapkan subdomain wildcard. Anda mungkin berharap untuk menambahkan sesuatu seperti baris di bawah ke konfigurasi DNS Anda.

1
*.nettutsappapp.com.      IN  A    91.32.913.343

Sebaliknya, jika Anda bekerja pada server lokal, menambahkan subdomain wildcard ke file host cukup rumit. Apa yang saya lebih suka lakukan adalah menambahkan entri tunggal untuk tujuan pengujian. Ini dapat dihapus setelah Anda selesai. Untuk domain kita, kita perlu menambahkan empat entri sebagai berikut:

  • 127.0.0.1 nettutsapp.com
  • 127.0.0.1 user1.nettutsapp.com
  • 127.0.0.1 user2.nettutsapp.com
  • 127.0.0.1 user3.nettutsapp.com

Konfigurasi Hosts Mac

Untuk melakukan ini di Mac, buka Terminal dan ketik sudo nano/etc/hosts. Gunakan tombol panah untuk pindah ke bagian bawah dokumen, dan tambahkan entri ke bagian bawah file. Setelah selesai, tekan Ctrl+X dan Y untuk mengonfirmasi penyimpanan.

dns-terminal1dns-terminal1dns-terminal1

Konfigurasi Hosts Windows

Jika Anda menggunakan Windows, telusuri ke direktori C:\Program Files\system32\drivers\etc dan buka file host di Notepad, atau editor teks pilihan Anda. Tambahkan empat entri, ditunjukkan di atas, dan simpan file-nya.

Jika Anda telah membuat perubahan DNS ke server aktif, itu akan memakan waktu beberapa saat sebelum Anda melihat efek apa pun. Jika Anda membuat perubahan pada file host Anda, perubahan akan segera terjadi.


Langkah 2: Konfigurasi Apache

Tujuannya di sini adalah untuk mengatur dua Virtual Host di Konfigurasi Apache,: satu melayani halaman depan (Basecamp Homepage), dan yang lainnya melayani halaman yang dilihat ketika diakses melalui subdomain (Dashboard Page).

Untuk menambahkan entri baru, Anda perlu membuka file httpd.conf, yang dapat ditemukan di direktori instalasi Apache. Sering ditemukan di folder bin/apache/conf. Namun, tergantung pada konfigurasi server Anda, lokasinya dapat bervariasi.

Setelah dibuka, Anda perlu menambahkan dua entri, ditunjukkan di bawah ini. Pastikan untuk mengubah DocumentRoot ke lokasi pilihan Anda, yang telah Anda buat.

Catatan: Ingat wildcard dan path direktori yang berbeda pada VirtualHost kedua.

Pengguna WAMP: Saya sarankan membaca posting ini, yang menjelaskan cara mengatur VirtualHosts. Anda mungkin juga menghadapi masalah perizinan; jadi saya sarankan untuk menempatkan direktori VirtualHost Anda di dalam direktori www.

1
  <VirtualHost *:80>
2
		DocumentRoot "/Users/densepixel/Sites/MAMP PRO/nettutsappfront"
3
		ServerName nettutsapp.com
4
		ServerAlias nettutsapp.com
5
	
6
		<Directory "/Users/densepixel/Sites/MAMP PRO/nettutsappfront">
7
			Options -Indexes 
8
			Options FollowSymLinks
9
			AllowOverride All
10
		</Directory>
11
	</VirtualHost>
12
	
13
	<VirtualHost *:80>
14
		DocumentRoot "/Users/densepixel/Sites/MAMP PRO/nettutsapp"
15
		ServerName nettutsapp.com
16
		ServerAlias *.nettutsapp.com
17
	
18
		<Directory "/Users/densepixel/Sites/MAMP PRO/nettutsapp">
19
			Options -Indexes 
20
			Options FollowSymLinks
21
			AllowOverride All
22
		</Directory>
23
	</VirtualHost>

Setelah Anda menyimpan file-nya, Anda perlu me-restart Apache agar perubahannya diterapkan.

Pastikan Anda telah membuat direktori yang Anda tentukan di file httpd.conf sebelum memulai server.


Langkah 4: Menguji Konfigurasi Server Kita

Sebelum kita menguji konfigurasinya, letakkan halaman html dasar di setiap direktori yang Anda buat sebelumnya. Mungkin tambahkan satu baris teks ke masing-masing, sehingga Anda dapat membedakannya. Saya telah menyalin contoh untuk Anda gunakan.

1
<!DOCTYPE html>
2
<html lang="">
3
<head>  
4
	<meta charset="utf-8">
5
	<title>NetTuts App Front</title>
6
</head>
7
<body>
8
	NetTutsApp Front
9
</body>
10
</html>

Selanjutnya, buka browser favorit Anda, dan periksa dulu alamat nettutsapp.com. Jika semuanya berfungsi, Anda harus melihat halaman yang Anda tempatkan di direktori 'nettutsappfront'.

Selanjutnya, periksa subdomain, misalnya. user1.nettutsapp.com; ini akan menunjukkan kepada Anda halaman lain yang Anda buat di direktori.

config-successconfig-successconfig-success

Anda dapat melanjutkan untuk memeriksa subdomain lain yang Anda tentukan di file host, yang semuanya harus menampilkan halaman yang disimpan dalam direktori kita.

Langkah 5: Instalasi CodeIgniter

Tutorial ini mengasumsikan bahwa Anda tahu cara menginstal CodeIgniter. Jika tidak, Anda harus melihat tutorial video ini oleh Jeffrey Way, yang menjelaskan prosesnya secara rinci.

Tempatkan file CodeIgniter ke dalam direktori kita setelah menghapus halaman html yang kita buat sebelumnya. Jika Anda menggunakan CodeIgniter 1.7.2, Anda mungkin ingin mengeluarkan folder application dari folder system.

nettutsapp-cinettutsapp-cinettutsapp-ci

Uji penginstalan dengan menjelajahi URL user1.nettutsapp.com, dan Anda akan melihat Halaman Selamat Datang CodeIgniter.

nettutsapp-ci-welcomenettutsapp-ci-welcomenettutsapp-ci-welcome

Langkah 6: Mengatur CodeIgniter

Atur CodeIgniter seperti biasa, seperti yang dijelaskan dalam tutorial ini. Anda mungkin ingin menghapus index.php dari URL, autoload beberapa perpustakaan atau helper, dll. Untuk keperluan tutorial ini, kita perlu melakukan autoload perpustakaan database dan helper url. Buka file autoload.php di direktori config, dan tambahkan entri yang relevan.

Kita juga perlu mengubah controller default ke salah satu yang akan kita buat, yang disebut dashboard. Nilai ini dapat diubah dalam file /config/routes.php.

Base_url

Untuk subdomain pengguna, kita perlu membuat base_url menjadi variabel dinamis, karena aplikasi akan menerima permintaan dari sejumlah subdomain potensial.

Cara termudah untuk melakukannya adalah dengan menggunakan variabel HTTP_HOST. Buka file config.php, dan temukan variabel $config['base_url'], dan ganti dengan kode berikut:

1
if(isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == "on"){$ssl_set = "s";} else{$ssl_set = "";}
2
$config['base_url'] = 'http'.$ssl_set.'://'.$_SERVER['HTTP_HOST'];

Kode ini memungkinkan untuk koneksi HTTPS, namun, jika Anda tidak pernah berencana untuk menggunakan HTTPS, Anda dapat menyederhanakannya ke base_url=$_SERVER['HTTP_HOST'].

Pengaturan Database

Sebelum kita melanjutkan dan menambahkan pengaturan database ke dalam aplikasi CodeIgniter kita, kita perlu membuat database dan tabel contoh.

Aplikasi contoh ini menggunakan satu database dan satu tabel. Tabel ini akan menampung semua subdomain yang saat ini ditetapkan, dan beberapa informasi dasar tentang mereka. Jika Anda memutuskan untuk menggunakan kode ini di aplikasi Anda sendiri, Anda harus menetapkan beberapa pengguna ke subdomain tunggal, namun skema database tersebut berada di luar cakupan tutorial ini.

Tabel ini bernama nt_subdomains, di dalam database ntapp, dan memiliki empat kolom:

  • subdomain_id(primary, auto_increment)
  • subdomain_name
  • user_fname
  • user_sname

Saya juga telah mengisi tabel dengan dua record, yang cocok dengan subdomain yang telah kita tambahkan ke file host kita:

php-my-adminphp-my-adminphp-my-admin

Sekarang kita dapat membuka konfigurasi database, file yang ditemukan di /application/config/database.php, dan mengedit nilai-nilai berikut ini sehingga cocok dengan pengaturan konfigurasi pribadi Anda.

1
$db['default']['hostname'] = 'localhost';
2
$db['default']['username'] = 'root'; //MAMP default

3
$db['default']['password'] = 'root'; //MAMP default

4
$db['default']['database'] = 'ntapp';

Dan kita selesai menyiapkan instalasi CodeIgniter kita. Mari mulai menggunakan subdomain di aplikasi kita.


Langkah 7: Membuat Controller dan View Kita

Untuk aplikasi ini, kita akan membuat dua controller. Yang pertama adalah controller error, yang menampilkan kesalahan jika subdomain belum terdaftar untuk digunakan dalam aplikasi. Controller lainnya adalah controller dashboard utama kita, yang dilihat oleh pengguna jika subdomain telah ditambahkan ke database kita.

Controller Error

Mari kita mulai dan membuat controller error kita. Pertama, buat file baru di direktori /application/controllers, dan beri nama error.php.
Catatan: Nama file itu penting

1
<?php
2
3
class Error extends Controller {
4
5
	function Error()
6
	{
7
		parent::Controller();
8
	}
9
10
	function index()
11
	{
12
		$this->load->view('error');
13
	}
14
}

Tambahkan kode di atas ke file error.php baru kita. Fungsi index memuat view yang disebut 'error', yang akan kita buat nanti.

Controller Dashboard

Sekarang kita perlu membuat controller dashboard utama, yang akan dimuat ketika pengguna memasuki salah satu subdomain. Controller kemudian akan memeriksa apakah subdomain telah terdaftar, dan akan dialihkan seperlunya. Kita akan menambahkan kode ini nanti, tapi pertama-tama, kita perlu membuat controller dasar.

Buat file baru di dalam direktori controllers, dan beri nama dashboard.php. Di dalam file ini, kita perlu membuat controller dan memuat view dashboard. Salin kode di bawah dan simpan file-nya.

1
<?php
2
3
class Dashboard extends Controller {
4
5
	function Dashboard()
6
	{
7
		parent::Controller();
8
	}
9
10
	function index()
11
	{
12
		$this->load->view('dashboard');
13
	}
14
}

View Error

Halaman kesalahan akan ditampilkan ketika pengguna mencoba mengakses subdomain, yang belum terdaftar untuk digunakan oleh aplikasi. Untuk keperluan tutorial, cukup buat halaman dasar, menampilkan pesan Subdomain Not Registered. Tambahkan kode di bawah ini ke file baru bernama error.php dan simpan dalam folder application/views.

1
<html>
2
<head>
3
	<title>Application Error : Nettuts App</title>
4
</head>
5
<body>
6
7
	<h1>Nettuts Application Error</h1>
8
9
	<p>Subdomain Not Registered</p>
10
11
</body>
12
</html>

View Dashboard

initial-dashboardinitial-dashboardinitial-dashboard

Untuk saat ini, kita hanya akan membuat halaman dashboard dasar. Anda dapat menggunakan struktur yang sama seperti view error, dan cukup ubah untuk membaca Nettuts Dashboard, atau sesuatu di sepanjang garis tersebut. Simpan halaman sebagai dashboard.php, dalam folder application/views.

Uji dua view dengan mengunjungi URL:

  • user1.nettutsapp.com/index.php/error
  • user1.nettutsapp.com/index.php/dashboard

Bekerja? Mari kita lanjutkan.


Langkah 8: Memperluas Controller Dashboard (Bagian 1)

Langkah selanjutnya adalah mengekstrak nama subdomain di controller kita sehingga kita dapat menggunakannya dalam kueri database.

Kita akan memasukkan kode pemeriksaan subdomain kita ke dalam fungsi construct di dalam controller dashboard. (Di bawah parent::Controller()). Ini berarti bahwa subdomain akan diperiksa ketika salah satu fungsi dalam controller dashboard diakses.

Cara termudah untuk mengekstrak nama subdomain adalah menggunakan fungsi PHP explode, dan atur pembatas menjadi '.'. Karena kita hanya membutuhkan bagian pertama, kita dapat membaginya menjadi dua bagian, dan kemudian menetapkan bagian pertama (nama subdomain) ke suatu variabel.

Untuk menguji ini, kita dapat meng-echo variabel di dalam controller itu sendiri. Lihat kode di bawah ini:

1
<?php
2
3
class Dashboard extends Controller {
4
5
	function Dashboard()
6
	{
7
		parent::Controller();
8
		
9
		$subdomain_arr = explode('.', $_SERVER['HTTP_HOST'], 2); //creates the various parts

10
		$subdomain_name = $subdomain_arr[0]; //assigns the first part

11
		echo $subdomain_name; // for testing only

12
	}
13
14
15
}

Akses URL subdomain Anda, dan Anda akan melihat subdomain yang benar meng-echo pada halaman Anda, seperti di bawah ini.
Catatan: Anda dapat menghapus pernyataan echo sekarang.

subdomain-parse1subdomain-parse1subdomain-parse1

Sekarang kita memiliki akses ke nama subdomain di controller kita, kita dapat memeriksa untuk melihat apakah telah ditambahkan tabel yang kita buat sebelumnya.

Kita akan menggunakan Kelas ActiveRecord CodeIgniter untuk membangun kueri kita, yang akan memeriksa tabel untuk subdomain yang diakses. Jika ada, maka pengguna akan dapat mengakses halaman dashboard. Jika, di sisi lain, subdomain belum dimasukkan, maka mereka ditolak aksesnya, dan kemudian diarahkan ke halaman kesalahan yang kita buat sebelumnya.

Untuk tutorial ini, kita tidak akan menggunakan model karena menjadikan tutorial lebih mudah diikuti. CodeIgniter cukup fleksibel karena tidak memaksa Anda untuk menggunakannya.

Pertama, kita perlu merakit kueri seperti yang ditunjukkan di bawah ini. Kode ini hanya akan berfungsi di PHP5, karena menggunakan metode berantai; namun, Anda dapat mengubahnya sesuai keinginan Anda.

1
// adds on from rest of construct //

2
$this->db->from('nt_subdomains')->where('subdomain_name', $subdomain_name);
3
$query = $this->db->get();

Kita dapat menggunakan fungsi row() CodeIgniter untuk memeriksa apakah subdomain itu ada dalam tabel. Jika tidak, maka kita perlu menggunakan fungsi pengalihan untuk mengarahkan pengguna kita ke controller error. Bagian selanjutnya dari kode adalah di bawah ini:

1
// adds on from previous code //

2
if($query->num_rows() < 1)
3
		{
4
		redirect ('error');
5
		}

Mari kita uji ini dengan mengakses user1.nettutsapp.com, yang harus mengarahkan Anda ke halaman dashboard. Sekarang, coba user3.nettutsapp.com, yang seharusnya mengarahkan Anda ke halaman kesalahan karena tidak dimasukkan ke dalam tabel.

subdomain-comapre1subdomain-comapre1subdomain-comapre1

Langkah 9: Memperluas Controller Dashboard (Bagian 2)

Sekarang kita dapat menggunakan informasi dalam tabel untuk menampilkan informasi spesifik untuk setiap subdomain.

Kita akan menambahkan ke fungsi index di controller dashboard kita. Pertama, salin kode nama subdomain dan kueri database yang kita gunakan sebelumnya.

1
function index()
2
	{
3
		$subdomain_arr = explode('.', $_SERVER['HTTP_HOST'], 2);
4
		$subdomain_name = $subdomain_arr[0];
5
		
6
		$this->db->from('nt_subdomains')->where('subdomain_name', $subdomain_name);
7
		$query = $this->db->get();
8
		
9
	}

Kita menggunakan fungsi row() CodeIgniter untuk mengambil hasil dari kueri. Fungsi row mengembalikan satu baris hasil, yang berarti kita tidak perlu menggunakan perulangan foreach; itu tidak perlu.

1
// adds on from rest of index function //

2
$subdomain_info = $query->row();

Kemudian, tetapkan nilai kolom user_fname dan user_sname ke array, $data, yang kemudian diteruskan ke view.

1
$data['fname'] = $subdomain_info->user_fname;
2
$data['sname'] = $subdomain_info->user_sname;
3
$this->load->view('dashboard', $data);

Kita dapat menggunakan nilai-nilai ini dalam view kita dengan menggunakan variabel $fname dan $sname. Buka view dashboard dan edit agar membaca:

1
	<p>Welcome to your dashboard 
2
	<b><?php echo $fname; ?> <?php echo $sname ?></b>
3
	</p>

Dan kita sudah selesai! Mari kita coba.


Langkah 10: Pengujian

Coba semua URL, dan mudah-mudahan, jika semuanya berjalan sesuai rencana, hasilnya harus seperti berikut:

  • nettutsapp.com → Halaman Front End
  • user1.nettutsapp.com → Dashboard (John Doe)
  • user2.nettutsapp.com → Dashboard (Steve Smith)
  • user3.nettutsapp.com → Halaman Kesalahan
finalresultfinalresultfinalresult

Kode Controller dan ViewI

nilah kode lengkap yang digunakan untuk controller dan view kita:

Controller Dashboard

1
<?php
2
3
class Dashboard extends Controller {
4
5
	function Dashboard()
6
	{
7
		parent::Controller();
8
		
9
		$subdomain_arr = explode('.', $_SERVER['HTTP_HOST'], 2);
10
		$subdomain_name = $subdomain_arr[0];
11
		
12
		
13
		$this->db->from('nt_subdomains')->where('subdomain_name', $subdomain_name);
14
		$query = $this->db->get();
15
		
16
		if($query->num_rows() < 1)
17
		{
18
		redirect ('error');
19
		}
20
21
	}
22
23
	function index()
24
	{
25
		$subdomain_arr = explode('.', $_SERVER['HTTP_HOST'], 2);
26
		$subdomain_name = $subdomain_arr[0];
27
		
28
		$this->db->from('nt_subdomains')->where('subdomain_name', $subdomain_name);
29
		$query = $this->db->get();
30
		
31
		$subdomain_info = $query->row();
32
		$data['fname'] = $subdomain_info->user_fname;
33
		$data['sname'] = $subdomain_info->user_sname;
34
		$this->load->view('dashboard', $data);
35
	}
36
}

Controller Error

1
<?php
2
3
class Error extends Controller {
4
5
	function Error()
6
	{
7
		parent::Controller();
8
	}
9
10
	function index()
11
	{
12
		$this->load->view('error');
13
	}
14
}

View Dashboard

1
<html>
2
<head>
3
	<title>Dashboard : Nettuts App</title>
4
</head>
5
<body>
6
7
	<h1>Nettuts Dashboard</h1>
8
9
	<p>Welcome to your dashboard 
10
	<b><?php echo $fname; ?> <?php echo $sname ?></b>
11
	</p>
12
	
13
</body>
14
</html>

View Error

1
<html>
2
<head>
3
	<title>Application Error : Nettuts App</title>
4
</head>
5
<body>
6
7
	<h1>Application Error</h1>
8
9
	<p>Subdomain Not Registered</p>
10
11
</body>
12
</html>

Kesimpulan

Tentu saja, tutorial ini hanya menjelaskan satu cara untuk mendapatkan fungsi yang bagus ini. Saya yakin masih banyak lagi; jadi jangan ragu untuk berbaur dengan pemikiran dan pendapat Anda di bagian komentar di bawah ini.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.