Kali ini saya akan memposting cara membuat website , artikel ini terkait dengan tugas kuliah saya mengenai website. Dan sebelumnya saya minta maaf pada Artikel ini tidak akan di jabarkan pembuatan yang begitu detail karena berhubung waktu tenggat pengumpulan tugas yang mepet : )...Ok baiklah langsung saja kita buat websitenya :
PEMBUATAN WEBSITE NEWBIEKNOW
Pada halaman index saya menggunakan template dari Pengunaan JQuery, templatenya berupa slider photo. Template awalnya seperti berikut :
Pengeditan di Dreamweaver :
Sekian yang dapat saya post untuk untuk tugas softskill dan juga untuk sharing pada para pengunjung blog ini, semoga bermanfaat ..!! :)
Dan tidak semua konten-konten PHP diatas murni dari pemikiran saya, kebanyakan saya mendapatkan referensi dari buku dan internet , jadi soal PHP saya masih benar-benar newbie hehe.. JUST TRY AND PRACTICE .. Thanks..
LINK DOWNLOAD WEBSITE :
DISINI
PEMBUATAN 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.
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 :
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 ..!! :)
Dan tidak semua konten-konten PHP diatas murni dari pemikiran saya, kebanyakan saya mendapatkan referensi dari buku dan internet , jadi soal PHP saya masih benar-benar newbie hehe.. JUST TRY AND PRACTICE .. Thanks..
LINK DOWNLOAD WEBSITE :
DISINI
0 comments:
Posting Komentar