Musim liburan telah usai. Para mahasiswa STIKOM DB JAMBI mulai disibukan dengan kegiatan skripsi. Bagi yang akan menyusun tentang proyek sebuah website, disini ada sedikit sharing dari saya untuk kamu" skalian. Di jamin deh pekerjaan kamu bakal lebih mudah. so.? check it out!! hehe

Dalam membuat front End, hal yang terpenting adalah membuat sebuah prototype dahulu. Prototype harus direncanakan dari awal sehingga dapat menghemat sumber daya dalam pengerjaannya kelak. Adapun tampilan prototype yang diharapkan dari website ini adalah sebagai berikut :

Dari gambar prototype front end diatas, dapat diketahu bahwa website kita terdiri atas beberapa modul yang bersifat dinamis sepeti menu, mitra kami, seputar sekolah dan jajak pendapat dimana data-data dari modul tersebut disimpan didalam database.

Untuk menghemat waktu pengejaan, penulis memutuskan untuk mencari template yang hampir sama dengan gambar prototype diatas. Saat ini, banyak cara mendapatkan template baik dengan cara klik kanan dan memilih save page as ataupun dengan mendownload dari website khusus yang menyediakan template gratis. Berdasarkan prototype diatas tadi, maka template yang akan penulis buat secara garis besar dapat disederhanakan seperti berikut :


Setelah disederhanakan, maka prototype front end yang akan dibagi tergagi menjadi 5 bagian inti yaitu top, left, mid, right dan bottom. Dalam melakukan mencari tampilan yang 100% sama, penulis mengalami kesulitan sehingga penulis memutuskan mencari tamplan yang setidaknya mendekati tampilan prototype diatas dengan warna yang sesuai dengan keinginan penulis yaitu dominan putih. Setelah sekian lama mencari melalui mesin pencari google, akhirnya penulis menemukan template yang hamper mendekati prototype diatas. Penulis menemukan template tersebut pada web http://www.freewebtemplates.com/download/templates/9087.

Setelah mendapatkan file template melalui klik pada link  download yang tersedia, hal yang perlu dilakukan adalah melakukan perubahan pada template tersebut agar sesuai dengan prototype sebelumnya. Berikut cara melakukan editing pada template :
1.Pindahkan isi dari template ke direktori htdoc didalam folder smk1




2.Bukalah file index.html pada file template dengan Dreamweaver CS4

3.Buanglah beberapa bagian pada bagian tengah sehingga hanya menyediakan sebuah kotak seperti yang terlihat pada gambar prototype.
4.Buanglah tulisan-tulisan yang tidak begitu perlu pada bagian footer, kiri maupun kanan sehingga hanya menyediakan kotak-kotak.

5.Dari gambar diatas,kita telah mendapati sebuah tampilan yang sudah sangat-sangat mendekati tampilan prototype kita. Selanjutnya, ubahlah tulisan-tulisan yang ada pada template agar sesuai dengan keinginan kita.

6.Hapuslah beberapa menu menjadi 3 saja yaitu home, galeri dan hubungi kami. Bila ada menu-menu tambahan lain, maka dapat ditambahkan melalui backend. Jika sudah, bukalah halaman yang telah diedit tadi melalui browser. Berikut adalah tampilan web pada dreamweaver dan browser
7.Ubahlah gambar banner dengan gambar yang telah disediakan dengan cara menimpa gambar header.jpg dengan gambar banner yang sesuai.


8.Selanjutnya, kita tinggal menyisikan konten atau data yang berasal dari database yang tentunya telah dibuat sebelumnya. Karena jumlah dari table yang terlalu banyak, maka penulis akan menyajikan salah satu contoh saja. Cara menampilkan data-data yang lain dapat dilakukan dengan cara yag sama.
9.Bukalah alamat http://localhost/phpmyadmin, kemudian pilihlah database smksatu. Pada database tersebut bukalah sebuah table berita.
10.Kliklah link insert dan isikan beberapa data contoh untuk ditampilkan pada front end yang telah kita bangun. Gambar dibawah menunjukandata yang telah kita masukan.
11.Kembalilah ke dreamweaver. Dan ketikan kode berikut pada bagian paling atas pada tab code. Untuk mempermudah penulisa kod, pilihlah file-save as, kemudian pilihlah extensi .php. Hal ini membuat dreamwever melakukan highlight untuk kode-kode php
 12.Tambahkan kode-kode pPHP tersebut sehingga telihat seperti gambar dibawah. Untuk koneksi.php tentunya sudah kita buat dahulu sebelumnya. Karena ini bersifat sangat dasar sekali, maka penulis tidak perlu menjelaskan hal tersebut.

13.Karena berita akan kita taruh dibagian mid, maka kliklah bagian tengah dari halaman pada tab design didalam drewamwever

14.Kembali ke tab code, dan ketikanlah kode berikut :




15.Kembali ke browser dan refreshla halaman index.php maka akan didapati gambar sepeti di bawah ini :

16.Untuk bagian-bagian lain pada website dapat dilakukan dengan cara yang sama