Langkah
persiapan
Sebelum
memulai membuat halaman dasbor, Anda harus terlebih dahulu menyediakan folder
untuk mengelola template halaman administrator. Halaman dasbor ini
nantinya akan menjadi template dasar dari seluruh halaman administrator.
Pada Tutorial
Code Igniter Part 4: Membuat halaman login administrator Anda
telah membuat folder layout.
Kursus Web Programming | Java Web Media
Berikut
langkah-langkahnya:
1.
Buka folder tutorial_ci/application/views/admin
2.
Buat folder baru dengan nama dasbor di
dalam folder admin tersebut
Membuat
template untuk seluruh halaman administrator/back end
Membuat
file head.php (folder tutorial_ci/application/views/admin/layout/)
File head.php adalah
bagian paling atas dari template halaman dasbor.
Kursus Pembuatan Website | Java Web Media
Ikuti
langkah-langkah berikut ini:
1.
Buka file index.html dari
folder tutorial_ci/assets/admin/. Ini adalah template dasar halaman
dasbor
2.
Buat file PHP baru dengan nama head.php di
folder tutorial_ci/application/views/admin/layout/
3.
Copy code baris ke-1 sampai dengan
baris ke-13 (mulai dari <!doctype html> sampai
dengan <div id=”wrapper”>, seperti terlihat dalam kode
di bawah ini:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Halaman Administrator – Java Web Media</title>
<link href=”../images/javawebmedia.png” rel=”shortcut icon”>
<link href=”../css/style-admin.css” rel=”stylesheet” type=”text/css”>
<link href=”../SpryAssets/SpryMenuBarHorizontal.css” rel=”stylesheet” type=”text/css”>
<script src=”../SpryAssets/SpryMenuBar.js” type=”text/javascript”></script>
</head>
<body>
<div id=”wrapper”>
<html>
<head>
<meta charset=”utf-8″>
<title>Halaman Administrator – Java Web Media</title>
<link href=”../images/javawebmedia.png” rel=”shortcut icon”>
<link href=”../css/style-admin.css” rel=”stylesheet” type=”text/css”>
<link href=”../SpryAssets/SpryMenuBarHorizontal.css” rel=”stylesheet” type=”text/css”>
<script src=”../SpryAssets/SpryMenuBar.js” type=”text/javascript”></script>
</head>
<body>
<div id=”wrapper”>
4.
Lakukan perubahan pada kode yang ada di
dalam area <head> sampai dengan </head> ini
yang semula:
<title>Halaman Administrator – Java Web
Media</title>
<link href=”../images/javawebmedia.png” rel=”shortcut icon”>
<link href=”../css/style-admin.css” rel=”stylesheet” type=”text/css”>
<link href=”../SpryAssets/SpryMenuBarHorizontal.css” rel=”stylesheet” type=”text/css”>
<script src=”../SpryAssets/SpryMenuBar.js” type=”text/javascript”></script>
<link href=”../images/javawebmedia.png” rel=”shortcut icon”>
<link href=”../css/style-admin.css” rel=”stylesheet” type=”text/css”>
<link href=”../SpryAssets/SpryMenuBarHorizontal.css” rel=”stylesheet” type=”text/css”>
<script src=”../SpryAssets/SpryMenuBar.js” type=”text/javascript”></script>
Simpan file head.php
Membuat
file header.php (dalam folder tutorial_ci/application/views/admin/layout/)
File
header.php akan menampilkan bagian header dari halaman dasbor.
Tutorial Code Igniter Java Web Media
Berikut
langkah-langkahnya:
1.
Buat file PHP baru dengan nama header.php dalam
folder tutorial_ci/application/views/admin/layout/
2.
Dari file index.html yang
ada di folder assets/admin/, copy code mulai dari <header> sampai
dengan <!–En header–> (sekitar baris ke-15 s/d 21)
3.
Lalu pada paste code tersebut di
file header.php kemudian lakukan perubahan sehingga menjadi
seperti kode di bawah ini. Perubahan-perubahan yang dilakukan diberi warna
merah.
4.
Simpan file header.php
Membuat
file menu.php (dalam folder tutorial_ci/application/views/admin/layout/)
File menu.php ini
nanti akan menjadi file yang khusus untuk menampilkan dan mengelola menu yang
ada di halaman administrator.
Kursus Web Programming | Java Web Media
Berikut
langkah-langkahnya:
1.
Buat file PHP baru dengan nama menu.php dalam
folder tutorial_ci/application/views/admin/layout/
2.
Copy kode yang ada di file index.html dalam
folder assets/admin/ mulai baris ke-23 sampai baris ke-46
(atau mulai dari <nav> sampai dengan <!– End
navigasi–>). Atau seperti kode di bawah ini:
<nav>
<ul id=”MenuBar1″ class=”MenuBarHorizontal”>
<li><a href=”#”>Dashboard</a></li>
<li><a href=”#” class=”MenuBarItemSubmenu”>Berita ARA</a>
<ul>
<li><a href=”#”>Data berita</a></li>
<li><a href=”#”>Tambah berita</a></li>
</ul>
</li>
<li><a href=”#” class=”MenuBarItemSubmenu”>User</a>
<ul>
<li><a href=”#”>Data User</a></li>
<li><a href=”#”>Tambah User</a></li>
</ul>
</li>
<li><a href=”config.php”>Konfigurasi</a></li>
</ul>
</nav>
<script type=”text/javascript”>
var MenuBar1 = new Spry.Widget.MenuBar(“MenuBar1″, {imgDown:”../SpryAssets/SpryMenuBarDownHover.gif”, imgRight:”../SpryAssets/SpryMenuBarRightHover.gif”});
</script>
<!–End Navigasi–>
<ul id=”MenuBar1″ class=”MenuBarHorizontal”>
<li><a href=”#”>Dashboard</a></li>
<li><a href=”#” class=”MenuBarItemSubmenu”>Berita ARA</a>
<ul>
<li><a href=”#”>Data berita</a></li>
<li><a href=”#”>Tambah berita</a></li>
</ul>
</li>
<li><a href=”#” class=”MenuBarItemSubmenu”>User</a>
<ul>
<li><a href=”#”>Data User</a></li>
<li><a href=”#”>Tambah User</a></li>
</ul>
</li>
<li><a href=”config.php”>Konfigurasi</a></li>
</ul>
</nav>
<script type=”text/javascript”>
var MenuBar1 = new Spry.Widget.MenuBar(“MenuBar1″, {imgDown:”../SpryAssets/SpryMenuBarDownHover.gif”, imgRight:”../SpryAssets/SpryMenuBarRightHover.gif”});
</script>
<!–End Navigasi–>
3.
Paste kode tersebut ke file menu.php.
Lalu lakukan perubahan (lihat warna merah).
<nav>
<ul id=”MenuBar1″ class=”MenuBarHorizontal”>
<li><a href=”<?php echo base_url(); ?>admin/dasbor”>Dashboard</a></li>
<li><a href=”<?php echo base_url(); ?>admin/berita” class=”MenuBarItemSubmenu”>Berita ARA</a>
<ul>
<li><a href=”<?php echo base_url(); ?>admin/berita”>Data berita</a></li>
<li><a href=”<?php echo base_url(); ?>admin/berita/tambah”>Tambah berita</a></li>
</ul>
</li>
<li><a href=”<?php echo base_url(); ?>/admin/user” class=”MenuBarItemSubmenu”>User</a>
<ul>
<li><a href=”<?php echo base_url(); ?>admin/user”>Data User</a></li>
<li><a href=”<?php echo base_url(); ?>admin/user/tambah”>Tambah User</a></li>
</ul>
</li>
<li><a href=”<?php echo base_url(); ?>/dasbor/config”>Konfigurasi</a></li>
</ul>
</nav>
<script type=”text/javascript”>
var MenuBar1 = new Spry.Widget.MenuBar(“MenuBar1″, {imgDown:”<?php echo base_url(); ?>assets/SpryAssets/SpryMenuBarDownHover.gif”, imgRight:”<?php echo base_url(); ?>assets/SpryAssets/SpryMenuBarRightHover.gif”});
</script>
<!–End Navigasi–>
<ul id=”MenuBar1″ class=”MenuBarHorizontal”>
<li><a href=”<?php echo base_url(); ?>admin/dasbor”>Dashboard</a></li>
<li><a href=”<?php echo base_url(); ?>admin/berita” class=”MenuBarItemSubmenu”>Berita ARA</a>
<ul>
<li><a href=”<?php echo base_url(); ?>admin/berita”>Data berita</a></li>
<li><a href=”<?php echo base_url(); ?>admin/berita/tambah”>Tambah berita</a></li>
</ul>
</li>
<li><a href=”<?php echo base_url(); ?>/admin/user” class=”MenuBarItemSubmenu”>User</a>
<ul>
<li><a href=”<?php echo base_url(); ?>admin/user”>Data User</a></li>
<li><a href=”<?php echo base_url(); ?>admin/user/tambah”>Tambah User</a></li>
</ul>
</li>
<li><a href=”<?php echo base_url(); ?>/dasbor/config”>Konfigurasi</a></li>
</ul>
</nav>
<script type=”text/javascript”>
var MenuBar1 = new Spry.Widget.MenuBar(“MenuBar1″, {imgDown:”<?php echo base_url(); ?>assets/SpryAssets/SpryMenuBarDownHover.gif”, imgRight:”<?php echo base_url(); ?>assets/SpryAssets/SpryMenuBarRightHover.gif”});
</script>
<!–End Navigasi–>
4.
Simpan kembali file menu.php tersebut
Membuat
file footer.php (dalam folder tutorial_ci/application/views/admin/layout/)
File footer.php adalah
bagian bawah dari tampilan website halaman dasbor.
Berikut
langkah-langkahnya:
1.
Buat file PHP baru dengan nama footer.php dalam
folder tutorial_ci/application/views/admin/layout/
2.
Copy code yang ada di file index.html yang
ada dalam folder assets/admin mulai baris ke-51 sampai ke-55
(atau mulai dari <div class=”clearfix”> sampai
dengan </html>). Seperti pada kode di bawah ini:
<div class=”clearfix”></div>
<footer>Web Design by Java Web Media – © by Java Web Media </footer>
</div>
</body>
</html>
<div class=”clearfix”></div>
<footer>Web Design by Java Web Media – © by Java Web Media </footer>
</div>
</body>
</html>
3.
Paste kode tersebut di file footer.php
4.
Simpan file footer.php
Membuat
file wrapper.php (di dalam
folder tutorial_ci/application/views/admin/layout/)
File wrapper.php berfungsi
untuk menyatukan seluruh elemen template yang telah dipisah-pisah tadi yang
selainjutnya akan di-load di controller yang nanti akan kita buat.
Kursus Desain Web Development
Berikut
langkah-langkahnya:
1.
Buat file PHP baru dengan nama wrapper.php dalam
folder tutorial_ci/application/views/admin/layout/
2.
Ketik kode di bawah ini:
<?php
require_once(‘head.php’);
require_once(‘header.php’);
require_once(‘menu.php’);
require_once(‘konten.php’);
require_once(‘footer.php’);
<?php
require_once(‘head.php’);
require_once(‘header.php’);
require_once(‘menu.php’);
require_once(‘konten.php’);
require_once(‘footer.php’);
3.
Simpan file wrapper.php
Membuat
file konten.php (dalam folder tutorial_ci/application/views/admin/layout/)
Halaman
atau file konten.php akan digunakan untuk me-load/menampilkan
halaman utama di masing-masing modul.
Tutorial Code Igniter | Java Web Media
Berikut
langkah-langkahnya:
1.
Buat file PHP baru dengan nama konten.php dalam
folder tutorial_ci/application/views/admin/layout/
2.
Ketik kode di bawah ini:
<?php
if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);
if($isi){
$this->load->view($isi);
}
if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);
if($isi){
$this->load->view($isi);
}
3.
Simpan file konten.php
Membuat
file dasbor_view.php (dalam folder tutorial_ci/application/views/admin/dasbor/)
Halaman
dasbor akan menjadi halaman utama bagian backend atau administrator website
Anda.
Belajar Code Igniter | Java Web Media
Ikuti
langkah-langkah ini:
1.
Buat file PHP baru dengan nama dasbor_view.php dalam
folder tutorial_ci/application/views/admin/dasbor/
2.
Ketik kode di bawah ini:
<div class=”konten”>
<h1>Halaman dasbor Code Iginter – Java Web Media</h1>
</div>
<!– End konten –>
<h1>Halaman dasbor Code Iginter – Java Web Media</h1>
</div>
<!– End konten –>
3.
Simpan file dasbor_view.php
Membuat Controller untuk
menampilkan halaman dasbor
File dasbor.php (dalam folder tutorial_ci/application/controllers/admin)
File dasbor.php (dalam folder tutorial_ci/application/controllers/admin)
Langkah
selanjutnya adalah membuat controller untuk menampilkan
halaman dasbor agar bisa diakses melalui website Anda dengan alamat http://localhost/tutorial_ci/admin/dasbor/. Nama
class yang digunakan adalah Dasbor.
Kursus Desain Web Depok
Berikut
langkah-langkahnya:
1.
Buat file PHP baru dengan nama dasbor.php di
dalam folder tutorial_ci/application/controllers/admin/
2.
Ketik kode di bawah ini:
<?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script
access allowed’);
class Dasbor extends CI_Controller {
public function index() {
$data=array(‘title’=>’Halaman Administrator – Java Web Media’,
‘isi’ =>’admin/dasbor/dasbor_view’
);
$this->load->view(‘admin/layout/wrapper’,$data);
}
}
class Dasbor extends CI_Controller {
public function index() {
$data=array(‘title’=>’Halaman Administrator – Java Web Media’,
‘isi’ =>’admin/dasbor/dasbor_view’
);
$this->load->view(‘admin/layout/wrapper’,$data);
}
}
Simpan file dasbor.php
3. Perubahan
format style melalui kode program client
Kode
Program Pemrograman Socket Sederhana Dengan Python
Tutorial pemrograman sederhana menggunakan python. Kali ini, saya ingin membuat kode program socket programming yang digunakan agar dapat menerima koneksi dari client.
Untuk lebih jelasnya, silakan simak kode program berikut ini :
Kode untuk server
server.py
#!usr/bin/python
import
socket # mengimport modul socket agar dapat menggunakan library yang digunakan
untuk komunikasi client server
s
= socket.socket() # untuk membuat koneksi
host
= '' #
menentukan host yang aktif atau bisa juga menggunakan function
socket.gethostname()
port
= 12345 # menentukan port yang
digunakan untuk berkomunikasi
s.bind((host,
port))# set supaya host dan port tersebut aktif
s.listen(5) #
mode yang digunakan untuk menunggu permintaan dari client
while
True: # kondisi apabila
sudah menerima permintaan dari client
c,
addr = s.accept() # menerima permintaan dari client
print
'Mendapatkan permintaan koneksi dari', addr # cetak pesan yang menunjukkan
alamat IP dari client
c.send('Terima
kasih atas permintaan koneksinya') # kirim pesan ke client
c.close()
# menutup koneksi
Kode untuk client
client.py
#!/usr/bin/python
import
socket
s
= socket.socket()
host
= ''
port
= 12345
s.connect((host,
port))
print
s.recv(1024)
s.close()
Kode yang terdapat pada client secara konsepnya hampir sama dengan kode pada server, hanya saja kode pada client memanggil fungsi connect(host, port) untuk memastikan bahwa host dan port tersebut sudah "available" untuk menerima koneksi.
Kemudian pada kode program client, akan memanggil fungsi recv() untuk menerima data yang dikirimkan oleh server.
0 Komentar