[Basic] 5. basic design & switch page

UJK RPL Tuts™ Part Five : Basic Design & Switch

Basic Design & Switch Page Web Design dasar dan Fungsi Switch untuk halaman

UJK RPL TUTS™

Part Five

Basic Level

Lisensi Dokumen

Seluruh dokumen yang dibuat oleh SCG dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk

tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan

pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penu lisan ulang, kecuali mendapatkan ijin terlebih dahulu dari Penulis atau Software Community Generation.

Copyright © 2012 Software Community Generation.


Overview Gambaran

Sebelum memulai Tutorial ini, harap sediakan dan pastikan komponen-komponen berikut:

Telah memahami dan menyelesaikan Tutorial sebelumnya

Adobe Dreamweaver CS3

Web Browser (Chrome, Opera, atau Firefox)

XAMPP 1.8.0

Jalankan XAMPP Control Panel, dan pastikan service Apache dan MySQL running.

Yang akan dipelajari:

Part Five : Basic Design & Switch Page

Did you know?

#Database atau #BasisData adalah ruang penyimpanan data berupa text dan informasi

bagi sebuah aplikasi, entah berbasis Dekstop ataupun Web. @enjangdspc

H

F F

S M

H

F

S M

H

F

S M S

3 Basic Layout

Switch Page

Home | About | Content | Gallery

<?php ?>

switch main content

Index.php?page=about

Index.php?page=content

Index.php?page=gallery

About.php

Content.php

Gallery.php


Basic Design Web Design Dasar Web design dasar yang akan dipelajari di tutorial ini adalah dengan menggunakan tabel dengan sedikit memakai sentuhan CSS.

Buka file index.php atau jika belum, buat file baru dengan nama index.php

Sisipkan tabel dengan column 2 dan row 5 dan width 1000px

Tata sedemikian rupa hingga seperti gambar

Masukkan kode CSS berikut untuk border page

style="border:#C5C5C5 solid thin"

taruh setelah tag table

Header

Navbar

Main

Content

Footer

Footlink

Sidebar


Header

Untuk bagian header Masukkan Gambar dengan Ukuran Standar 1000px x 200px.

Navbar

Untuk bagian menu atau navbar (navigation bar), klik baris ke dua lalu insert table dengan

kolom 5 dan baris 1.

Untuk sementara isikan menu di masing-masing kolom navbar, dan beri background color

Sidebar

Untuk bagian sidebar sisipkan kembali tabel dengan kolom 1 dan row 2 (width 200px), dan

beri warna background baris pertama (Sidebar Box).

Jika ingin menambah kotak pada sidebar di bawah kotak pertama, tinggal lakukan hal yang

sama.

Sidebar Box


Main Content

Bagian content atau main content, sisipkan tabel denga colomn 1 dan row 2 (width 780px)

Footlink

Untuk bagian footlink, sisipkan tabel dengan colom 3 dan baris 1. (width 1000px)

Di kolom ke dua, sisipkan kembali tabel dengan kolom 5 dan row 1 (width 600px) dan

masukkan menu dan beri background color

Footer

Seperti pada bagian header, pada bagian footer bisa memakai gambar dengan ukuran yang sama. 1000px x 100px

Main Content


PREVIEW

Tampilan diatas adalah simpel dan dasar dari web design dengan sedikit sentuhan CSS. Untuk pengembangan tergantung kalian masing-masing. So Keep Experiment.


Switch Page Fungsi switch Halaman Switch page adalah salah satu fungsi php yang dapat digunakan untuk mengatur konten dari halaman tanpa perlu mengcopy file index untuk setiap halaman, karena switch sendiri akan menampilkan data berdasarkan parameter php di dalam bagian main content pada layout index.php

Buat file baru (php) di dreamweaver Masukkan kode berikut

Simpan dengan nama main_switch.php Buat file baru sesuai dengan nama file yang di include kan di switch page

<?php

<?php

$page = (isset($_GET['page']))? $_GET['page'] : "main";

switch ($page) {

case 'about' : include 'about.php'; break;

case 'content' : include 'content.php'; break;

case 'gallery' : include 'gallery.php'; break;

case 'main' : default : include 'page/main.php';

} ?>

Boleh copy paste dengan syarat memahami

File yang harus dibuat

about.php

content.php

gallery.php main.php


Tandai setiap file dengan menuliskan isi konten saja Contoh: Buat file baru dengan nama about.php Lalu isikan didalamnya:

Lakukan untuk file lainnya

Kembali ke index.php lalu masukkan kode php include main_switch.php di bagian main content. <?php include “main_switch.php”; ?>

Terakhir kasih link untuk menu yang berada di navbar - Untuk Menu Home = index.php - Menu About = index.php?page=about - Menu Content = index.php?page=content - Menu Gallery = index.php?page=gallery

Supaya lebih jelas cara kerja Switch Page, perhatikan gambar berikut

Ketika

link home tampilkan disini isi dari main.php

link about tampilkan disini isi dari about.php

link content tampilkan disini isi dari content.php

link gallery tampilkan disini isi dari gallery.php

Index.php Index.php?page=about


Cheat Sheet

Ingatlah selalu ini

Dalam tutorial ini telah dipelajari:

1. Dasar Design Web

- 1000px, center

- Header, Navbar, Sidebar, Content, Footlink, Footer

2. Switch Page

- Buat file switch

- include di bagian main di index.php

- buat file-file yang berisikan konten untuk main switch sesuai menu

- tak perlu kopi paste index.php

Do the Best and Good Luck.

This Tuts Brought To You By

Author : Enjang Kurniawan

AKA enjangdspc. Work as Web Programmer and Chief Web Officer at SCGeneration. Alumni of RPL SMKN 1 Karawang 2011.

@enjangdspc on.fb.me/enjangdspc [email protected]

http://www.twitter.com/enjangdspc

http://on.fb.me/enjangdspc

[Basic] 5. basic design & switch page

Education

Transcript of [Basic] 5. basic design & switch page