[Basic] 5. basic design & switch page

1,669 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,669
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
43
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

[Basic] 5. basic design & switch page

  1. 1. UJK RPL TUTS™ Part Five Basic Design & Switch Page Web Design dasar dan Fungsi Switch untuk halaman 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 . Basic LevelUJK RPL Tuts™ Pa rt Fi ve : Ba sic Design & Swi tch Page 1
  2. 2. OverviewGambaran Part Five : Basic Design & Switch PageSebelum 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: 3 Basic Layout H H H S M S M S M S F F F F Switch Page Index.php?page=about Home | About | Content | Gallery Index.php?page=content About.php <?php ?> Index.php?page=gallery switch main content Content.php Gallery.php Did you know? #Database atau #BasisData adalah ruang penyimpanan data berupa text dan informasi bagi sebuah aplikasi, entah berbasis Dekstop ataupun Web. @enjangdspcUJK RPL Tuts™ Pa rt Fi ve : Ba sic Design & Swi tch Page 2
  3. 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 Header NavbarSidebar Main ContentFootlink Footer Masukkan kode CSS berikut untuk border page style="border:#C5C5C5 solid thin" taruh setelah tag table UJK RPL Tuts™ Pa rt Fi ve : Ba sic Design & Swi tch Page 3
  4. 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 colorSidebar Untuk bagian sidebar sisipkan kembali tabel dengan kolom 1 dan row 2 (width 200px), dan beri warna background baris pertama (Sidebar Box). Sidebar Box Jika ingin menambah kotak pada sidebar di bawah kotak pertama, tinggal lakukan hal yang sama.UJK RPL Tuts™ Pa rt Fi ve : Ba sic Design & Swi tch Page 4
  5. 5. Main Content Bagian content atau main content, sisipkan tabel denga colomn 1 dan row 2 (width 780px) Main ContentFootlink 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 colorFooter Seperti pada bagian header, pada bagian footer bisa memakai gambar dengan ukuran yang sama. 1000px x 100pxUJK RPL Tuts™ Pa rt Fi ve : Ba sic Design & Swi tch Page 5
  6. 6. PREVIEWTampilan diatas adalah simpel dan dasar dari web design dengan sedikit sentuhan CSS. Untukpengembangan tergantung kalian masing-masing. So Keep Experiment.UJK RPL Tuts™ Pa rt Fi ve : Ba sic Design & Swi tch Page 6
  7. 7. Switch PageFungsi switch HalamanSwitch page adalah salah satu fungsi php yang dapat digunakan untuk mengatur konten dari halamantanpa perlu mengcopy file index untuk setiap halaman, karena switch sendiri akan menampilkan databerdasarkan parameter php di dalam bagian main content pada layout index.php Buat file baru (php) di dreamweaver Masukkan kode berikut Boleh copy paste dengan syarat memahami <?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; } ?> Simpan dengan nama main_switch.php Buat file baru sesuai dengan nama file yang di include kan di switch page File yang harus dibuat about.php content.php gallery.php main.phpUJK RPL Tuts™ Pa rt Fi ve : Ba sic Design & Swi tch Page 7
  8. 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 Index.php Index.php?page=about 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.phpUJK RPL Tuts™ Pa rt Fi ve : Ba sic Design & Swi tch Page 8
  9. 9. Cheat SheetIngatlah selalu iniDalam 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 enjang.kurniawan@outlook.comUJK RPL Tuts™ Pa rt Fi ve : Ba sic Design & Swi tch Page 9

×