Cara menggunakan template web dinamis php

Web dinamis adalah web yang isinya dapat dirubah sewaktu-waktu dengan sangat mudah tanpa harus melakukan perubahan pada kode-kode atau coding. Konten yang terdapat di web dinamis pun tersimpan disebuah database, sehingga bagi orang-orang yang tidak bisa akan coding-pun dapat merubah isi konten tersebut tanpa harus menguasai bahasa pemrograman web yang biasa disebut dengan coding. Untuk perubahan konten atau dokumen dalam sebuah web dinamis dibilang mudah ketimbang web statis yang harus memiliki keahlian khusus pada bagian scripting web tersebut.

Sebuah website dinamis umumnya dibuat menggunakan Compact Management System (CMS) tertentu dengan penyimpanan data di database (misalnya seperti MySQL) dan biasanya juga web ini tersusun dari bahasa pemerograman seperti HTML, CSS, PHP, JavaScript dan berhubungan dengan database MySQL.

Maksud dan Tujuan

Agar kita dapat mengenal, mengerti dan memahami serta membuat web dinamis sederhana.


Alat dan Bahan

  • Laptop
  • Text Editor (Sublime-Text)

Ciri-ciri Web Dinamis

  • Menggunakan bahasa pemrograman web misalnya seperti PHP, HTML dan yang lainnya.
  • Memiliki database.
  • Konten di dalamnya bisa berasal dari pengunjung dan bisa juga dari database.
  • Lebih sering di-update.
Proses dan Tahapan

Buat file HTML dengan nama index.html dan masukkan script berikut ini


Cara menggunakan template web dinamis php

Cara menggunakan template web dinamis php

Kemudian untuk memmpercantiknya kita buat cssnya sengan nama style.css\


Cara menggunakan template web dinamis php

Cara menggunakan template web dinamis php

Cara menggunakan template web dinamis php

Cara menggunakan template web dinamis php

Cara menggunakan template web dinamis php



Maka hasilnya akan seperti dibawah ini.


Cara menggunakan template web dinamis php

Dan utntuk form lainnya sama seperti index.html, cuma bedanya pada contentnya saja yang disesuaikan dengan kebutuhan.


Cara menggunakan template web dinamis php

Cara menggunakan template web dinamis php

Cara menggunakan template web dinamis php

Cara menggunakan template web dinamis php

Hasil yang Didapatkan

Saya dapat membuat template web dinamis sederhana

Kesimpulan

Jadi membuat web  dinamis tidaklah sulit, cukup mengeri dasar pemrogaman sudah bisa membuat web dinamis.


Sekian postingan saya kali ini, bila ada yang mengganjal dihati anda silahkan komentar dibawah. Terima ksaih.

Pembuatan template web yang dinamis hanya cukup dengan cara memisah-misahkan file v_index.php yang sudah dibuat tadi menjadi beberapa bagian file view. Yaitu akan dibuat menjadi tiga file view menjadi file v_header.php, v_index.php, v_footer.php. file-file tersebut disimpan di tempat yang sama seperti file v_index.php sebelumnya.

File application/views/v_header.php

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

MODUL WEB PROGRAMMING II 27

<title>Web Prog II | Merancang Template sederhana dengan codeigniter</title>

<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>assets/css/stylebuku.css">

</head>

<h3>Membuat Template Sederhana dengan CodeIgniter</h3>

</hgroup>

<nav>

<ul>

<li><a href="<?php echo base_url().'index.php/web' ?>">Home</a></li>

<li><a href="<?php echo base_url().'index.php/web/about'

?>">About</a></li>

<p align='justify'>Pada pengertian codeigniter di atas tadi di jelaskan bahwa codeigniter menggunakan metode MVC. Apa itu MVC? kita juga harus mengetahui apa itu MVC sebelum masuk dan lebih jauh dalam belajar codeigniter.</p>

<p>MVC adalah teknik atau konsep yang memisahkan komponen utama menjadi tiga komponen yaitu model, view dan controller.</p>

<ol type="a">

<li>Model</li>

<p align='justify'>Model adalah kelas yang merepresentasikan atau memodelkan tipe data yang akan digunakan oleh aplikasi.

Model juga dapat didefinisakn sebagai bagian penanganan yang berhubungan dengan pengolahan atau manipulasi database.

seperti misalnya mengambil data dari database, menginput dan pengolahan database lainnya. semua intruksi atau fungsi yang berhubung dengan pengolahan database di letakkan di dalam model. Sebagai contoh, jika ingin membuat aplikasi untuk menghitung luas dan keliling lingkaran, maka dapat memodelkan objek lingkaran sebagai kelas model.</p>

<p align='justify'>Sebagai catatan, Semua model harus disimpan di dalam folder application\models</p>

<li>View</li>

MODUL WEB PROGRAMMING II 28

<p align='justify'>View merupakan bagian yang menangani halaman user interface atau halaman yang muncul pada user(pada browser). tampilan dari user interface di kumpulkan pada view untuk memisahkannya dengan controller dan model sehingga memudahkan web designer dalam melakukan pengembangan tampilan halaman website.</p>

<li>Controller</li>

<p align='justify'>Controller merupakan kumpulan intruksi aksi yang menghubungkan model dan view, jadi user tidak akan berhubungan dengan model secara langsung, intinya data yang tersimpan di database (model) di ambil oleh controller dan kemudian controller pula yang menampilkan nya ke view. Jadi controller lah yang mengolah intruksi.</p>

<p align='justify'>Dari penjelasan tentang model view dan controller di atas dapat di simpulkan bahwa controller sebagai penghubung view dan model. misalnya pada aplikasi yang menampilkan data dengan menggunakan metode konsep mvc, controller memanggil intruksi pada model yang mengambil data pada database, kemudian controller yang meneruskannya pada view untuk di tampilkan. jadi jelas sudah dan sangat mudah dalam pengembangan aplikasi dengan cara mvc ini karena web designer atau front-end developer tidak perlu lagi berhubungan dengan controller, dia hanya perlu berhubungan dengan view untuk mendesign tampilann aplikasi, karena back-end developer yang menangani bagian controller dan modelnya. Jadi pembagian tugas pun menjadi mudah dan pengembangan aplikasi dapat di lakukan dengan cepat dan terstruktur.</p>

</section>

Setelah file dipecah menjadi tiga file, selanjutnya cara untuk memanggil file-file tersebut agar bisa tampil menyatu adalah dengan cara memanggilnya secara berurutan pada controller Web.php

<?php

defined('BASEPATH') or exit ('no direct script access allowed');

class Web extends CI_Controller{

MODUL WEB PROGRAMMING II 29 }

Hasil yang ditampilkan akan sama seperti sebelum dipisah menjadi 3 file. Tetapi kelebihannya adalah dapat dengan mudah untuk membuat halaman lainnya dengan tampilan header dan footer yang tetap sama. Tinggal memanggil v_header.php dan v_footer.php dan mengganti file v_index.php dengan file halaman lain yang ingin ditampilkan dengan header dan footer tersebut.

Contoh untuk membuat halaman lainnya yaitu akan dibuat halam v_about.php. Yang mana link untuk menuju halaman about sudah dibuat sebelumnya pada file v_header.php.

Link yang sudah dibuat yaitu Home diseting untuk menuju atau mengakses method index() dan About diseting menuju atau mengakses methode about()

<li><a href="<?php echo base_url().'index.php/web' ?>">Home</a></li>

<li><a href="<?php echo base_url().'index.php/web/about' ?>">About</a></li>

Sekarang buatlah file view lagi dan beri nama v_about.php dan simpan di application/views/v_about.php

<section>

<h1><?php echo $judul ?></h1>

<p align='justify'>Pada pengertian codeigniter di atas tadi di jelaskan bahwa codeigniter menggunakan metode MVC. Apa itu MVC? kita juga harus mengetahui apa itu MVC sebelum masuk dan lebih jauh dalam belajar codeigniter.</p>

<p>MVC adalah teknik atau konsep yang memisahkan komponen utama menjadi tiga komponen yaitu model, view dan controller.</p>

<ol type="a">

<li>Model</li>

<p align='justify'>Model adalah kelas yang merepresentasikan atau memodelkan tipe data yang akan digunakan oleh aplikasi.

Model juga dapat didefinisakn sebagai bagian penanganan yang berhubungan dengan pengolahan atau manipulasi database.

seperti misalnya mengambil data dari database, menginput dan pengolahan database lainnya. semua intruksi atau fungsi yang berhubung dengan pengolahan database di letakkan di dalam model. Sebagai contoh, jika ingin membuat aplikasi untuk menghitung luas dan keliling lingkaran, maka dapat memodelkan objek lingkaran sebagai kelas model.</p>

<p align='justify'>Sebagai catatan, Semua model harus disimpan di dalam folder application\models</p>

<li>View</li>

<p align='justify'>View merupakan bagian yang menangani halaman user interface atau halaman yang muncul pada user(pada browser). tampilan dari user interface di kumpulkan pada view untuk memisahkannya dengan controller dan model sehingga memudahkan web designer dalam melakukan pengembangan tampilan halaman website.</p>

<li>Controller</li>

MODUL WEB PROGRAMMING II 30

<p align='justify'>Controller merupakan kumpulan intruksi aksi yang menghubungkan model dan view, jadi user tidak akan berhubungan dengan model secara langsung, intinya data yang tersimpan di database (model) di ambil oleh controller dan kemudian controller pula yang menampilkan nya ke view. Jadi controller lah yang mengolah intruksi.</p>

<p align='justify'>Dari penjelasan tentang model view dan controller di atas dapat di simpulkan bahwa controller sebagai penghubung view dan model. misalnya pada aplikasi yang menampilkan data dengan menggunakan metode konsep mvc, controller memanggil intruksi pada model yang mengambil data pada database, kemudian controller yang meneruskannya pada view untuk di tampilkan. jadi jelas sudah dan sangat mudah dalam pengembangan aplikasi dengan cara mvc ini karena web designer atau front-end developer tidak perlu lagi berhubungan dengan controller, dia hanya perlu berhubungan dengan view untuk mendesign tampilann aplikasi, karena back-end developer yang menangani bagian controller dan modelnya. Jadi pembagian tugas pun menjadi mudah dan pengembangan aplikasi dapat di lakukan dengan cepat dan terstruktur.</p>

</section>

Kemudian buat method baru yaitu method about() pada controller Web.php

<?php

defined('BASEPATH') or exit ('no direct script access allowed');

class Web extends CI_Controller{

MODUL WEB PROGRAMMING II 31 http://localhost/rental_buku/index.php/web/about

MODUL WEB PROGRAMMING II 32 PERTEMUAN 4

In document KATA PENGANTAR. Bogor, 10 Maret Lisda Widiastuti, M.Kom MODUL WEB PROGRAMMING II (Page 30-36)