[WEBSITE] WEBSITE NEWBIEKNOW

Website ini saya berinama NEWBIEKNOW dan bertemakan Pengetahuan Ilmu Komputer, kenapa namanya NEWBIEKNOW ??, karena pada website ini berisi hanya pengetahuan dasar dan diperuntukan untuk para NEWBIE , website ini merupakan website dinamis (atau tidak tetap , kontenya dapat berubah  –ubah yang diatur oleh admin). Baiklah tidak panjang lebar lagi saya jelaskan, langsung saja ke pembuatan.

A. Pertama : Pembuatan template.

Pembuatan template di website ini menggunakan Adobe Photoshop, yaitu dengan menggunakan slice tool sehingga layout website dapat kita kreasikan sesuai keinginan kita untuk selanjutnya kita export ke html untuk kemudian di edit di adobe dreamweaver. Berikut Gambarnya :
Preview edit dengan Adobe Photoshop :



Setelah saya membuat layout seperti diatas, kemudian saya mengexport file nya ke html & images , sehingga nantinya akan dalam bentuk html dan dapat di edit di dreamweaver. Nah kemudain file hasil export di buka di dreamweaver , lalu pada tahap ini saya membuat menu-menu diantaranya terdiri dari menu utama dan menu artikel :

1. Menu Utama (samping) : HOME, ABOUT, DOWNLOAD,GALLERY,SHOUTBOX.
Ada juga menu search yang kita gunakan untuk mencari artikel yang kita butuhkan.

2. Menu Artikel( Atas) : terdiri dari menu dan submenu Pemrograman : JAVA, Netbeans, VBnet. Kom.Jaringan : Dasar Jaringan, Internet. OS & Software : Windows , Linux, OS & Software. Desain Grafis : Photoshop, Illustrator, CorelDraw. Dan juga ada Banner Website NEWBIEKNOW dan Banner Universitas Gunadarma.

3. Menu Tambahan : terdiri dari menu Login dan menu Register.
Preview edit dengan Adobe Dreamweaver :



B. Kedua : Pembuatan Halam Index

Pada halaman index saya menggunakan template dari Pengunaan JQuery, templatenya berupa slider photo. Template awalnya seperti berikut :


Berikut adalah template awalnya, kemudian saya edit dengan Adobe Dreamweaver , dengan mengganti photo dan konten text didalamnya. Kemudain Saya mengedit file CSS dan Mengganti Background dan mengedit posisi dan size layoutnya. Pada template ini saya membuat link ke menu : HOME, ABOUT, DOWNLOAD, dan REGISTER.

Pengeditan di Dreamweaver :



C. Ketiga : Pembuatan Konten-konten Halaman

Pada Halam Home:
Saya membuat konten flash . Konten ini berupa Logo yang bergelombang layaknya air. Nah pada pembuatnya saya menggunakan Adobe Flash CS5. Kemudian saya Insert Kontent Flash tersebut di Adobe Dreamweaver.

Pada Halam About :
Pada halaman About saya memberikan gambar dan isi berupa keterangan website ini.

Pada Halaman Download :
Pada halaman Download saya memberikan link-link ebook secara free , namun pada halam ini saya berikan hak akses member, sehingga hanya member yang sudah register yang bisa mengakses halaman web ini.

Pada Halaman Gallery :
Pada halam Gallery berisikan konten berupa Gallery foto-foto yang saya masukan yaitu berupa hasil karya pembuat website dan lain sebagainya. Nah pada gallery ini saya menggunakan Jquery untuk memberikan effek zoom atau preview pada foto-foto yang di klik

Pada Halaman Shoutbox :
Pada halaman ini saya memasukan konten berupa shoutbox atau pesan singkat untuk meninggal kan jejak, disini saya menggunakan Jquery untuk memberikan efek Loadin saat kita memasukan pesan. Dan pada halaman ini juga memerlukan hak akses Member.

Pada Halaman Login :
Pada halam Login, saya membuat dengan script PHP , disini saya membuat Form Login terdiri dari Username dan Password , yang digunakan untuk Login member yang suudah terdaftar. Untuk tatacara pembuatan script PHP sengaja saya tidak jelaskan karena nanti akan terlalu panjang dalam artikel ini J.

Pada Halaman Register :
Dihalaman register saya membuat dengan Form klomnya terdiri dari : Name , Username, Password, Email. Pada halaman ini user bisa mendaftar untuk menjadi member dari website NewbieKnow sehinngga user bisa mengisi form Login dan dapat mengakses halaman Download dan Shoutbox .

Pada Halaman Search :
Di halaman ini saya menggunakan script sql dan PHP dalam pembuatan halaman search , yaitu dengan menyeleksi database yang sesuai kriteria pada form input search.

Berikut adalah preview dari halaman-halaman menu utama :



D. Keempat : Pembuatan Halaman-halaman Admin

Adapun pembuatan halaman admin pada website ini :
Pada website ini saya membuat halam admin yang digunakan untuk mengupdate artikel dan menghapus member pada website. Halaman admin ini terdapat pada direktori NewbieKnow/admin-newbie
Halaman admin ini terdiri dari :
Halaman Index : Yaitu halaman untuk login admin yang terdiri dari form Username dan form Password
Halaman Home : Yaitu ucapan selamat datang pada Halaman Admin
Halaman Article : Berisi Link-Link untuk menulis article yang terdiri dari beberapa kategori yang sudah saya jabarkan sebelumnya.
Halaman Users : Disini berisi data Member yang sudah daftar dari halaman register dan pada kolom tindakan terdapat pilihan untuk menghapus user.
Berikut adalah halaman – halaman admin :



Sekian yang dapat saya post untuk untuk tugas softskill dan juga untuk sharing pada para pengunjung blog ini, semoga bermanfaat ..!! :)

Download