MODUL PRAKTIKUM PEMROGRAMAN WEB

Xampp : Adalah salah satu paket aplikasi webserver yang dapat digunakan untuk keperluan membuat webserver pada komputer lokal, aplikasi yang termasuk didalam paketnya yaitu : apache web server, php server, mysql server dan lainya. Download http://sourceforge.net/projects/xampp/

1. Unzip hasil download di drive C: 2. Jalankan “setup_xampp.bat” di direktori xampp. 3. Jalankan “xampp-control.exe”.

1. Buka file \xampp\php\php.ini 2. Hilangkan tanda ; pada baris-baris dibawah ini untuk mengaktifkan fitur �

error_reporting = E_ALL | E_NOTICE

�

extension=php_mysql.dll

�

extension=php_mysqli.dll

�

memory_limit = 128M

�

display_errors = On

�

post_max_size = 200M

3. Buka file \ xampp\apache\conf\httpd.conf 4. Hilangkan tanda # pada baris-baris dibawah ini untuk mengaktifkan fitur DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

1

MODUL PRAKTIKUM PEMROGRAMAN WEB

�

ServerRoot "C:/xampp-win32-1.8.2-4-VC9/xampp/apache"

�

Listen 80

�

LoadModule rewrite_module modules/mod_rewrite.so

�

LoadModule ssl_module modules/mod_ssl.so

�

ServerName localhost:80

�

DocumentRoot "C:/xampp-win32-1.8.2-4-VC9/xampp/htdocs"

5. Start PHP dan MYSQL server pada “ xampp-control.exe” 6. Buat folder “praktikum” pada “\xampp\htdocs\” 7. Taruh semua file web di direktori “praktikum”

Source : www.w3schools.com/html/

This is a heading

This is a heading

This is a heading

This is a paragraph.

DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

2

MODUL PRAKTIKUM PEMROGRAMAN WEB

<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; DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

3

MODUL PRAKTIKUM PEMROGRAMAN WEB

padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; }









DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

5

MODUL PRAKTIKUM PEMROGRAMAN WEB

Apakah itu CSS ? �

CSS stands for Cascading Style Sheets

�

CSS defines how HTML elements are to be displayed

�

Styles were added to HTML 4.0 to solve a problem

�

CSS saves a lot of work

�

External Style Sheets are stored in CSS files

Source : http://www.w3schools.com/css/

body { background-color: #d0e4fe; }

h1 { color: orange; text-align: center; }

p{ font-family: "Times New Roman"; font-size: 20px; }

DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

6

MODUL PRAKTIKUM PEMROGRAMAN WEB



1. Contoh 1 body { background-color: lightblue; } h1 { text-align: center; color: red; }

h2 { text-align: center; color: red; }

p{ text-align: center; color: red; }

2. Contoh 2 h1 { background-color: #6495ed; DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

7

MODUL PRAKTIKUM PEMROGRAMAN WEB

}

p{ background-color: #e0ffff; }

div { background-color: #b0c4de; }

3. Contoh 3 body { background-image: url("bgdesert.jpg"); }

4. Navigation bar

• Home
• News
• Contact
• About

ul { list-style-type: none; margin: 0;

DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

8

MODUL PRAKTIKUM PEMROGRAMAN WEB

padding: 0; }

li { display: inline; }

li { float: left; }

a{ display: block; width: 60px; }

Apa itu PHP : PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages. PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's ASP. Source : http://www.w3schools.com/php

DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

9

MODUL PRAKTIKUM PEMROGRAMAN WEB



1. Contoh 1

"; echo "My house is " . $COLOR . "
"; echo "My boat is " . $coLOR . "
"; ?>

DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

10

MODUL PRAKTIKUM PEMROGRAMAN WEB

2. Contoh 2 $x = 5; $y = 4; echo $x + $y; Echo “”;

3. Contoh 3
function myTest() { global $x, $y; $y = $x + $y; }

myTest(); echo $y; // outputs 15 ?>

Adalah : SQL is a standard language for accessing databases.

DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

11

MODUL PRAKTIKUM PEMROGRAMAN WEB

12

Our SQL tutorial will teach you how to use SQL to access and manipulate data in: MySQL, SQL Server, Access, Oracle, Sybase, DB2, and other database systems. Cara mengakses SQL Admin : http://Localhost/phpmyadmin Contoh 1. Tabel Mahasiswa No

NPM

Nama

Prodi_id

Email

Contoh 2. Table Prodi Id

nama

Timestamp

1

Teknik Industri

2

Teknik Informatika

Contoh 3. Menampilkan npm dan nama No

NPM

Nama

Contoh 4. Menampilkan nama mahasiswa dan jurusan no

nama

Jurusan

1 2

Contoh 5. Menampilkan nama mahasiswa yg prodinya Teknik Informatika

DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

Timestamp

MODUL PRAKTIKUM PEMROGRAMAN WEB

No

NPM

Nama

Jurusan

1

Teknik Informatika

2

Teknik Informatika

connect_error) { die("Connection failed: " . $conn->connect_error); } $sql = "SELECT title,content FROM berita"; $result = $conn->query($sql); $x=1; if ($result->num_rows > 0) { echo ""; // output data of each row while($row = $result->fetch_assoc()) { echo ""; $x=$x+1; } echo "

no	Judul	Isi
".$x."	".$row["title"]."	".$row["content"]."

"; } else { echo "0 results"; } $conn->close(); ?>

DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

13

MODUL PRAKTIKUM PEMROGRAMAN WEB

14

1. Copy joomla ke directory /xampp/htdocs/joomla 2. Unzip /extract joomla 3. Jalankan xampp server (xampp control panel.exe), pastikan apache dan mysql start warna hijau 4. Buat database dengan nama sembarang (contoh : joomla) melalui phpmyadmin di http://localhost/phpmyadmin 5. Panggil instalasi joomla http://localhost/joomla

DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

MODUL PRAKTIKUM PEMROGRAMAN WEB

DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

15

MODUL PRAKTIKUM PEMROGRAMAN WEB

16

Halaman admin dapat diakses di http://localhost/joomla/administrator Halaman web dapat diakses di http://localhost/joomla

Jika ingin membuat menu yang jika di klik menuju ke artikel tertentu, pilih konfigurasi seperti digambar dibawah ini. Atau sesuaikan dengan yang diinginkan dengan memilih pada menu item typeAdm

Untuk memilih template-template default yang telah disediakan joomla, klik menu extensionstemplate manager. Klik default pada template yang diinginkan Location Site : Template untuk halaman pengunjung Location Administrator : Template untuk halaman admin

DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

MODUL PRAKTIKUM PEMROGRAMAN WEB

Modul adalah fasilitas2 yang biasanya tampil di kanan dan kiri halaman web (contoh : modul search, last article, last comment, tag dll). Untuk mengaktifkan/menonaktifkan modul bisa diakses di menu Extensions-module manager Klik New untuk menambahkan modul-modul default lainnya yang telah disediakan joomla Jika modul yang diinginkan tidak tersedia, dapat di download di website joomla http://extensions.joomla.org

DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

17

MODUL PRAKTIKUM PEMROGRAMAN WEB

Plugin pada joomla mirip dengan modul yaitu script kecil yang berfungsi untuk melakukan pekerjaan2 tambahan yang tidak tersedia pada joomla. Perbedaan mendasar antara modul dan plugin yaitu, jika modul dapat dipindah2 posisi pada tampilan web, sedang plugin tidak bisa, contoh (plugin konversi Bahasa, plugin tombol social media pada setiap article, plugin text editor) Jika plugin2 yang dibutuhkan tidak tersedia, silahkan download di website joomla http://extensions.joomla.org

DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

18

MODUL PRAKTIKUM PEMROGRAMAN WEB

DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

19

MODUL PRAKTIKUM PEMROGRAMAN WEB

20

1. Extract / Unzip CodeIgniter-3.0.0.zip ke dalam /xampp/htdocs/codeigniter. 2. Ubah setingan pada file /codeigniter/application/config/config.php baris 20 $config['base_url'] = 'http://localhost/codeigniter/';

3. Instalasi selesai, buka browser http://localhost/codeigniter

1. Ubah setingan pada file /codeigniter/application/config/routes.php �

Baris 52 menjelaskan bahwa file pertama yang dipanggil ketika codeigniter dijalankan yaitu ‘home.php’ pada folder controller $route['default_controller'] = 'main';

2. Buat file main.php pada folder /codeigniter/application/controller/ �

Function index adalah function pertama yang dipanggil ketika file home.php ini dipanggil

�

Baris 13 digunakan untuk memanggil file test.php, pada folder “view”

�

Berkut isi file codeigniter/application/controller/main.php

DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

MODUL PRAKTIKUM PEMROGRAMAN WEB

load­>view('test'); //memanggil view test.php    }  }       

3. Buat file test.php pada folder /codeigniter/application/view/ yang isinya adalah modifikasi dari welcome.php:

Skenario : �

Halaman web yang akan dibuat terdiri 5 menu : Home, Tentang Kuliah, Tentang Kerja, About me, Contact

�

Pada sub bab 7.4 ini semua tulisan/content pada tiap2 halaman bersifat statis yang ditulis langsung pada html (bukan dari database).

�

File CSS yang digunakan adalah file css pada praktikum2 sebelumnya dengan pembagian tampilan menjadi 4 : Header, Menu kiri, Content, footer.

�

Code-code CSS digabung dengan kode HTML pada file2 didalam folder view.

�

MVC yang terlibat hanya Controller dan View.

DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

21

MODUL PRAKTIKUM PEMROGRAMAN WEB

1. Buat file main.php pada direktori /codeigniter/application/controller. 2. Buat 5 file pada direktori /codeigniter/application/view. home.php kuliah.php kerja.php aboutme.php contact.php

Isi file /codeigniter/application/controller/main.php adalah sebagai berikut : 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 } DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

22

MODUL PRAKTIKUM PEMROGRAMAN WEB

23

}

Berikut adalah isi dari /codeigniter/application/view/home.php

Isi dari keempat file lainnya (kuliah.php, kerja.php, aboutme.php, contact.php) adalah sama tinggal diganti didalam div section nya disesuaikan kalimat paragrafnya. Buat folder /assets pada /codeigniter/, isinya style.css dan header.jpg (ambil dr pertemuan 4)

DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

MODUL PRAKTIKUM PEMROGRAMAN WEB

Skenario : �

Halaman web yang akan dibuat terdiri 5 menu : Home, Tentang Kuliah, Tentang Kerja, About me, Contact

�

Pada sub bab 7.5 ini semua tulisan/content pada tiap2 halaman bersifat statis yang berasal dari script php/html.

�

Style/CSS yg digunakan berasal dari bootstrap (CSS Framework).

�

MVC yang terlibat yaitu Controller dan View.

Ada 12 entitas yang terlibat dalam pembahasan sub bab ini, yaitu � � � � � � � � � � �

main.php (controller) template.php (libraries) home.php (view) kuliah.php (view) kerja.php (view) contactus.php (view) aboutme.php (view) header.php(view/isinya berasal dari bootstrap) content.php (view/isinya berasal dari bootstrap) footer.php (view/isinya berasal dari bootstrap) container.php (view/isinya berasal dari bootstrap)

DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

24

MODUL PRAKTIKUM PEMROGRAMAN WEB

Langkah – langkah : 1. Buat file Main.php (Controller) pada /xampp/htdocs/codeigniter/application/controller/main.php yg isinya sebagai berikut load->library('template'); } public function index() { $this->home(); } public function home() { $input=$this->template->home(); $this->load->view('container',$input,''); // Memanggil view home.php } public function kuliah() { $input=$this->template-> kuliah (); $this->load->view('container',$input,''); // Memanggil view kuliah.php } public function kerja() { $input=$this->template-> kerja (); $this->load->view('container',$input,''); // Memanggil view kerja.php } public function aboutme() { $input=$this->template-> aboutme (); $this->load->view('container',$input,''); // Memanggil view aboutme.php } public function contact() { $input=$this->template-> contact (); $this->load->view('container',$input,''); // Memanggil view contact.php } }

DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

25

MODUL PRAKTIKUM PEMROGRAMAN WEB

2. Template.php (Library) dibawah ini berfungsi untuk menangani templating/style pada website yang kita buat yang nantinya dikombinasikan dengan Bootstrap. CI=& get_instance(); $this->CI->load->helper('url'); $this->CI->load->view_data['base_url']=base_url(); } public function index() { $this->home(); } public function home(,$output=NULL) { //halaman utama $data[‘base_url’]=base_url(); $data['page_title']='Halaman Utama'; $data['h1']='

Selamat datang di websiteku

'; $data['content']=$this->CI->load->view('home',’’,true); $output['header']=$this->CI->load->view('header',$data,true); $output['content']=$this->CI->load->view('content',$data,true); $output['footer']=$this->CI->load->view('footer','',true); RETURN $output; } public function kuliah($output=NULL) { //halaman kuliah $data[‘base_url’]=base_url(); $data['page_title']='Halaman Kuliah'; $data['content']=$this->CI->load->view('kuliah',’’,true); $output['header']=$this->CI->load->view('header',$data,true); $output['content']=$this->CI->load->view('content',$data,true); $output['footer']=$this->CI->load->view('footer','',true); RETURN $output; } public function kerja($output=NULL) { //Halaman kerja $data[‘base_url’]=base_url(); $data['page_title']='Halaman Kerja'; $data['content']=$this->CI->load->view('kerja',’’,true); $output['header']=$this->CI->load->view('header',$data,true); $output['content']=$this->CI->load->view('content',$data,true); DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

26

MODUL PRAKTIKUM PEMROGRAMAN WEB

27

$output['footer']=$this->CI->load->view('footer','',true); RETURN $output; }

public function aboutme($output=NULL) { // halaman aboutme $data[‘base_url’]=base_url(); $data['page_title']='Halaman Tentang Aku'; $data['content']=$this->CI->load->view('aboutme',’’,true); $output['header']=$this->CI->load->view('header',$data,true); $output['content']=$this->CI->load->view('content',$data,true); $output['footer']=$this->CI->load->view('footer','',true); RETURN $output; } public function contactus($output=NULL) { //Halaman Contact Us $data['page_title']='Halaman Kontak'; $data[‘base_url’]=base_url(); $data['content']=$this->CI->load->view('contactus',’’,true); $output['header']=$this->CI->load->view('header',$data,true); $output['content']=$this->CI->load->view('content',$data,true); $output['footer']=$this->CI->load->view('footer','',true); RETURN $output; } }

3. Buat file container.php pada direktori /codeigniter/application/view/container.php yg isinya seperti gambar dibawah ini � File ini berfungsi sebagai file yg bertugas untuk menggabungkan 3 file header.php, content.php serta footer.php menjadi satu tampilan website. Berikut isi file container.php

4. Isikan kalimat bebas pada masing2 file /views/home.php , /views/kuliah.php, /views/kerja.php, /views/contactus.php, /views/aboutme.php. Contohnya seperti dibawa ini

Ini halaman Home

5. Extract contoh template shym.zip di direktori /xampp/htdocs/codeigniter/assets DOSEN PENGAMPU : INDRA GUNAWAN, ST., M.KOM., CEH., CHFI

MODUL PRAKTIKUM PEMROGRAMAN WEB

28

6. Buka file index.html pada direktori /assets/index.html menggunakan browser, kemudian buka source code nya dgn cara klik kanan halaman web pilih view page source (mozilla). 7. Copy baris 1-94 dari source code diatas, kemudian pastekan ke /codeigniter/application/view/header.php. 8. Copy baris 95 sampai 582 dari source code diatas, kemudian pastekan ke /codeigniter/application/view/content.php. 9. Copy sisanya, baris 583 sampai 693 dari source code diatas, kemudian pastekan ke /codeigniter/application/view/footer.php. 10. Pada ketiga script diatas header.php, content.php, footer.php tambahkan “assets/” setelah src=” dan src=’, (gunakan fitur find replace dengan cara memencet Ctrl+H, isi find dengan src=’ isi replace dengan src=’assets’) 11. Tambahkan script dibawa ini pada baris 583 dibawah