[Basic] 5. basic design & switch page
-
Upload
enjang-kurniawan -
Category
Education
-
view
1.464 -
download
3
Transcript of [Basic] 5. basic design & switch page
UJK RPL Tuts™ Part Five : Basic Design & Switch Page 1
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.
UJK RPL Tuts™ Part Five : Basic Design & Switch Page 2
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
UJK RPL Tuts™ Part Five : Basic Design & Switch Page 3
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
UJK RPL Tuts™ Part Five : Basic Design & Switch Page 4
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
UJK RPL Tuts™ Part Five : Basic Design & Switch Page 5
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
UJK RPL Tuts™ Part Five : Basic Design & Switch Page 6
PREVIEW
Tampilan diatas adalah simpel dan dasar dari web design dengan sedikit sentuhan CSS. Untuk pengembangan tergantung kalian masing-masing. So Keep Experiment.
UJK RPL Tuts™ Part Five : Basic Design & Switch Page 7
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
UJK RPL Tuts™ Part Five : Basic Design & Switch Page 8
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
UJK RPL Tuts™ Part Five : Basic Design & Switch Page 9
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]